Относительный URL-адрес другого номера порта в гиперссылке?

136

Есть ли способ без Javascript / сценариев на стороне сервера связать с другим номером порта в том же поле, если я не знаю имени хоста?

например:

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

(Этот пример не работает, поскольку он будет рассматривать: 8080 как строку, к которой я хочу перейти)

html

— Киаран МакНалти
источник

stackoverflow.com/questions/8317059/relative-path-but-for-port Проверьте это ... у меня это сработало

Поскольку многие люди ниже набросились на серверные решения, переменная NGINX $http_hostработает, например, 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

Сценарий: 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/:8080for 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.

— Дункан Икс Симпсон

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часть, просто начиная с '//'.

— kbrock

Выглядит вполне законно. Элегантный.

— Джей

Очень удобно и элегантно.

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

Просто скажу, что в 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>

должно сработать. Однако точный формат будет зависеть от используемой вами технологии.

— GDT
источник

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">

— указывать

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.

— MUY Бельгия
источник

По какой-то причине это не совсем сработало для меня - он направил браузер http//localhost:8081, обратите внимание на отсутствие двоеточия. Я просто полностью удалил часть протокола, так как Chrome все равно принял http.

— joerick

Как вы это тестировали?

— MUY Belgium

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>

— a_rahmanshah
источник

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()">
...

— ddiepo
источник