超链接中不同端口号的相对URL?

Cia*_*lty 126 html

如果我不知道主机名,有没有办法在没有Javascript /服务器端脚本的情况下链接到同一个盒子上的不同端口号?

例如:

<a href=":8080">Look at the other port</a>
Run Code Online (Sandbox Code Playgroud)

(这个例子不起作用,因为它只会对待:8080作为我要导航到的字符串)

Cra*_*een 81

这些怎么样:

单击时修改端口号:

<a href="/other/" onclick="javascript:event.target.port=8080">Look at another port</a>
Run Code Online (Sandbox Code Playgroud)

但是,如果将鼠标悬停在链接上,则不会显示包含新端口号的链接.直到你点击它,它才会添加端口号.此外,如果用户右键单击链接并执行"复制链接位置",则会获得未修改的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>
Run Code Online (Sandbox Code Playgroud)


小智 51

您可以使用document.write轻松完成,当您将鼠标悬停在其上时,URL将正确显示.您也不需要使用此方法的唯一ID,它适用于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>
Run Code Online (Sandbox Code Playgroud)

  • 另请注意,您不需要包含`window.location.protocol`部分,只需要以''//'`开头. (4认同)
  • 简单而优雅!我不知道为什么这不会有更多的选票 - 也许这只是一个后来者. (2认同)

Gar*_*een 47

如果这可以工作会很好,我不明白为什么不是因为它:是URI组件内端口分离的保留字符,所以浏览器可以现实地将其解释为相对于此URL的端口,但不幸的是它没有并且它没有办法做到这一点.

因此,您需要使用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);
Run Code Online (Sandbox Code Playgroud)

在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>
Run Code Online (Sandbox Code Playgroud)

  • 请__do不要使用此解决方案___.它将完全*破坏*没有Javascript的客户端,可能包括许多可访问设备,如屏幕阅读器.而是在服务器端生成URL. (7认同)
  • 这在Safari 6中不起作用.问题是你没有从相对url中删除端口,所以你最终会得到类似`http:// myhost:8080 /:8080`的`href =": 8080" `.您可以在`target.port = port [1];`下添加此行来解决此问题.`target.href = target.href.replace("/:"+ target.port,"");`(这不是一个完美的解决方案,因为它是一个查找/替换,但它对于你不是的简单情况很有用担心URL中的端口字符串.) (6认同)
  • 没有 Javascript 就没有办法做到这一点。 (2认同)

Wol*_*ahl 11

在鼠标悬停时修改端口号:

<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>
Run Code Online (Sandbox Code Playgroud)

这是对/sf/answers/946575591/的改进,没有正确显示链接的缺点.


a_r*_*hah 7

这个解决方案对我来说看起来更干净

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


gdt*_*gdt 5

没有JavaScript,您将不得不依靠某些服务器端脚本。例如,如果您使用的是ASP,则类似...

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

应该管用。但是,确切的格式将取决于您使用的技术。


小智 5

在与这个搏斗之后,我发现实际上 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>
Run Code Online (Sandbox Code Playgroud)