Відносна URL-адреса до іншого номера порту в гіперпосиланні?

136

Чи існує спосіб без сценаріїв Javascript / на сервері з'єднатись з іншим номером порту в одному полі, якщо я не знаю імені хоста?

наприклад:

<a href=":8080">Look at the other port</a>

(Цей приклад не працює, оскільки він буде просто розглядати: 8080 як рядок, до якого я хочу перейти)

html

— Ciaran McNulty
джерело

stackoverflow.com/questions/8317059/relative-path-but-for-port Перевірте це ... це працювало для мене

Оскільки багато людей внизу нагромаджені серверними рішеннями, $http_hostvar NGINX працює, наприклад: return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>тобто у /etc/nginx/conf.d/strange.confфайлі.

— MarkHu

52

Було б добре, якби це могло спрацювати, і я не бачу, чому ні, тому що :це зарезервований символ для розділення портів всередині компонента URI, щоб браузер міг реалістично інтерпретувати це як порт щодо цієї URL-адреси, але, на жаль, це не ' t і немає способу це зробити.

Тому для цього вам потрібен Javascript;

// delegate event for performance, and save attaching a million events to each anchor
document.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName.toLowerCase() == 'a')
  {
      var port = target.getAttribute('href').match(/^:(\d+)(.*)/);
      if (port)
      {
         target.href = window.location.origin;
         target.port = port[1];
      }
  }
}, false);

Тестовано у Firefox 4

Fiddle: http://jsfiddle.net/JtF39/79/

Оновлення : виправлено помилку для додавання порту до кінця URL-адреси, а також додано підтримку відносних та абсолютних URL-адрес, які потрібно додати до кінця:

<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>

— Гері Грін
джерело

1

тож без javascript немає істинного рішення

— Даніель Руф

2

Немає способу зробити це без Javascript.

— Гері Грін

6

У Safari 6. це не спрацювало. Проблема полягає в тому, що ви не видаляєте порт з відносного URL-адреси, тож ви закінчуєте щось подібне http://myhost:8080/:8080до href=":8080". Ви можете додати цей рядок під `target.port = port [1];`, щоб виправити це. target.href = target.href.replace("/:"+target.port, "");(Це не ідеальне рішення, оскільки це пошук / заміна, але це добре для простих випадків, коли ви не турбуєтесь про те, що порт-рядок буде в URL-адресі.)

— zekel

1

Моїм рішенням було зробити клас ASP.NET, який генерує URL-адресу. Це по суті те саме рішення, що і вище, лише на стороні сервера.

— rookie1024

7

Будь ласка , не використовуйте це рішення . Він повністю розіб'ється на клієнтах без Javascript, ймовірно, включатиме безліч пристроїв доступності, таких як зчитувачі екрану. Створіть натомість URL-адреси на стороні сервера.

— Sven Slootweg

88

Як щодо цього:

Змініть номер порту при натисканні:

<a href="/other/" onclick="javascript:event.target.port=8080">Look at another port</a>

Однак якщо ви наведіть курсор миші на посилання, воно не відображатиме посилання з новим номером порту. Це число, поки ви не натиснете на нього, додасть номер порту. Крім того, якщо користувач правою кнопкою миші натискає посилання та робить "Копіювати місце розташування посилання", він отримує немодифіковану URL-адресу без номера порту. Тож це не ідеально.

Ось спосіб змінити URL-адресу відразу після завантаження сторінки, тому наведення курсору на посилання або виконання "Копіювати розташування посилання" отримає оновлену URL-адресу з номером порту:

<html>
<head>
<script>
function setHref() {
document.getElementById('modify-me').href = window.location.protocol + "//" + window.location.hostname + ":8080/other/";
}
</script>
</head>

<body onload="setHref()">
<a href="/other/" id="modify-me">Look at another port</a>
</body>
</html>

— Крейг МакКвін
джерело

Дякую, що вказали на застереження, про які я знав. У моїй ситуації застереження не дуже важливі, і я віддаю перевагу простоті вашого першого рішення. Я був майже впевнений, що я вже схвалив вашу відповідь, але програмне забезпечення, здається, не відповідає, і, ймовірно, пам'ять програмного забезпечення є надійнішою, ніж моя. Я його схвалив (знову ??).

— Кевін Уокер

Я вирішив таємницю: я випадково наголосив на одній з інших відповідей натомість. На жаль У мене недостатньо репутації, щоб скасувати свою випадкову виплату.

— Кевін Уокер

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>технічно не повинен працювати, відповідно до специфікацій w3 . event.targetповинно бути readonly. Але це, здається, працює для мене в Chrome і Firefox!

— JamesThomasMoon1979

Одне лайнерне рішення - це чудово! +1

— Пьотр Кула

Дякую. Мені подобається ваше друге рішення, оскільки я можу встановити href елемента в HTML як резервний варіант для найбільш вірогідного URI.

— Дункан X Сімпсон

56

Ви можете це легко використовувати, використовуючи document.write, і URL-адреса буде відображатися правильно, коли ви наводите курсор на неї. Також вам не потрібен унікальний ідентифікатор за допомогою цього методу, і він працює з Chrome, FireFox та IE. Оскільки ми посилаємося лише на змінні та не завантажуємо жодних зовнішніх скриптів, використання Document.write тут не вплине на ефективність завантаження сторінки.

<script language="JavaScript">
document.write('<a href="' + window.location.protocol + '//' + window.location.hostname + ':8080' + window.location.pathname + '" >Link to same page on port 8080:</a> ' );
</script>

— Курт Шульц
джерело

3

Просто і елегантно! Я не знаю, чому це не має більшої кількості голосів - можливо, це просто запізнення.

— Кевін Х. Паттерсон

5

також зауважте, вам не потрібно включати window.location.protocolчастину, тільки починаючи з '//'.

— кброк

Здається легітом. Елегантний.

— Джей

Справжній зручний та елегантний.

— Роберт Лучан Кіріак

Просто сказати, що document.writeце сьогодні загалом нерекомендовано. Було б краще зробити щось на кшталтmyElement.innerHTML = '...'

— mwfearnley

13

Змініть номер порту в режимі миші:

<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>

Це вдосконалення https://stackoverflow.com/a/13522508/1497139, яке не має зворотного зв'язку, щоб неправильно відобразити посилання.

— Вольфганг Фал
джерело

5

Без JavaScript вам доведеться розраховувати на деякі сценарії на стороні сервера. Наприклад, якщо ви використовуєте ASP, щось на зразок ...

<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080">Look at the other port</a>

повинен працювати. Однак точний формат буде залежати від технології, яку ви використовуєте.

— гдт
джерело

4

Після боротьби з цим я виявив, що SERVER_NAME є зарезервованою змінною. Отже, якщо ви перебуваєте на сторінці (www.example.com:8080), ви повинні мати змогу скинути 8080 та викликати інший порт. Наприклад, цей модифікований код просто працював для мене і переміщує мене з будь-якого базового порту на порт 8069 (замініть ваш порт, якщо потрібно)

<div>
    <a href="http://<?php print
    $_SERVER{'SERVER_NAME'}; ?>:8069"><img
    src="images/example.png"/>Example Base (http)</a>
</div>

— Лендіс Арнольд
джерело

1

Приємне рішення PHP! Ви можете пропустити протокол, щоб його було автоматично виявлено:<a href="https://stackoverflow.com//<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">

— ADTC

3

Краще отримати URL-адресу від серверних змінних:

// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">

// ASP.net
<a href='<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp'>

— T30
джерело

2

Немає необхідності у складному JavaScript: просто вставіть вузол скрипта після свого якоря, потім отримайте вузол у javascript та змініть його властивість href методом window.location.origin .

 <a id="trans">Look at the other port</a>
 <script>
      document.getElementById('trans').href='http://'+window.location.origin+':8081';
 </script>

Властивість id має бути унікальною на всій сторінці, тому ви можете скористатися іншим методом для отримання об'єктів вузла.

Тестовано з apache та Firefox в Linux.

— МУЙ Бельгія
джерело

Чомусь це не дуже спрацювало для мене - він скеровував браузер, щоб http//localhost:8081відзначити відсутні товсту кишку. Я просто видалив частину протоколу взагалі, оскільки Chrome так чи інакше припустив http.

— joerick

Як ти це випробував?

— МУП Бельгія

1

Я думаю, що це має бути window.location.hostnameзамість цього. Дивіться developer.mozilla.org/en-US/docs/Web/API/Location

— mwfearnley

2

Це рішення для мене виглядає більш чистим

<a href="#"  
    onclick="window.open(`${window.location.hostname}:8080/someMurghiPlease`)">
    Link to some other port on the same host
  </a>

— а_рахманшах
джерело

1

На основі відповіді Гері Хоула , але зміни URL-адрес на завантаженні сторінки, а не на натисканні.

Я хотів показати URL за допомогою css:

a:after {
  content: attr(href);
}

Тому мені знадобився перетворити href якоря, щоб він містив фактичний URL-адресу, який був би відвіданий.

function fixPortUrls(){
  var nodeArray = document.querySelectorAll('a[href]');
  for (var i = 0; i < nodeArray.length; i++) {
    var a = nodeArray[i];
    // a -> e.g.: <a href=":8080/test">Test</a>
    var port = a.getAttribute('href').match(/^:(\d+)(.*)/);
    //port -> ['8080','/test/blah']
    if (port) {
      a.href = port[2]; //a -> <a href="https://stackoverflow.com/test">Test</a>
      a.port = port[1]; //a -> <a href="http://localhost:8080/test">Test</a>
    }
  }
}

Викличте вищевказану функцію при завантаженні сторінки.

або в одному рядку:

function fixPortUrls(){var na=document.querySelectorAll('a[href]');for(var i=0;i<na.length;i++){var a=na[i];var u=a.getAttribute('href').match(/^:(\d+)(.*)/);u&&a.href=u[2]&&a.port=u[1];}}

(Я використовую forзамість того, forEachщоб він працював в IE7.)

— Сем Хаслер
джерело

0

Жодна з відповідей, на які я переглянув (і скажу, що я їх не прочитав усіх), не налаштовує URL-адресу таким чином, щоб середній клацання або "відкрити в новій вкладці" справно функціонували - лише звичайний клік, щоб перейти за посиланням. Я запозичив відповідь Гері Гріна, і замість того, щоб коригувати URL-адресу на ходу, ми можемо коригувати її, коли сторінка завантажується:

...
<script>
function rewriteRelativePortUrls() {
    var links = document.getElementsByTagName("a");
    for (var i=0,max=links.length; i<max; i++)
    {
        var port = links[i].getAttribute("href").match(/^:(\d+)(.*)/);
        if (port)
        {
            newURL = window.location.origin + port[0]
            links[i].setAttribute("href",newURL)
        }    
    }
}

</script>
<body onload="rewriteRelativePortUrls()">
...

— ддіепо
джерело