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

  • 本文关键字:相对 URL 口号 超链接 html
  • 更新时间 :
  • 英文 :


如果我不知道主机名,有没有Javascript/服务器端脚本可以链接到同一盒子上的不同端口号的方法?

例如:

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

(此示例不起作用,因为它只会将 :8080 视为我要导航到的字符串)

这些怎么样:

单击时修改端口号:

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

您可以使用 document.write 轻松完成此操作,当您将鼠标悬停在 URL 上时,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>

如果这可以工作就好了,我不明白为什么不这样做,因为:是 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);

在火狐 4 中测试

小提琴:http://jsfiddle.net/JtF39/79/


更新:修复了将端口附加到 url 末尾的错误,还添加了对将相对和绝对 url 附加到末尾的支持:

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

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

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

这是对 https://stackoverflow.com/a/13522508/1497139 的改进,它没有未正确显示链接的缺点。

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

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

在努力解决这个问题之后,我发现实际上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>

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

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

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

最好从服务器变量中获取 url:

// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">
// .net:
<a href='<%=Request.ServerVariables('SERVER_NAME')%>:8080/index.asp'>

不需要复杂的javascript:只需在锚点后面插入一个脚本节点,然后在javascript中获取节点,并使用window.location.origin方法修改其href属性。

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

id 属性必须是唯一的页面范围,因此您可能希望使用其他方法来检索节点对象。

在Linux上使用apache和Firefox进行测试。

基于 Gary Hol 的回答,但在页面加载时而不是点击时更改 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="/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中工作。

我看过的所有答案(我会说,我没有全部阅读)都没有调整 URL,以便中键单击或"在新选项卡中打开"可以正常工作——只有常规点击即可点击链接。 我借用了Gary Greene的回答,而不是即时调整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()">
...

我也需要相同的功能,但我也想做协议替换。

我的解决方案将查找data-samehost-portdata-samehost-protocol,并在锚标记上重新生成 href 属性,以使用相同的当前主机名和指定的端口和/或协议。

这是我正在使用的:

...
<script type="text/JavaScript">
/**
In http you cannot make a relative link to the same domain but different port.
This script will take urls that look like this:
[given current url: 'http://some-domain.com:3000/a/path/file.html']
    1. <a data-samehost-port="8080" href="/some/path">some link</a>
    2. <a data-samehost-protocol="https" href="/some/path">some link</a>
    3. <a data-samehost-protocol="https" data-samehost-port="8080" href="/some/path">some link</a>
and make them look like this:
    1. <a href="http://some-domain.com:8080/some/path">some link</a>
    2. <a href="https://some-domain.com/some/path">some link</a>
    3. <a href="https://some-domain.com:8080/some/path">some link</a>
**/
document.addEventListener('DOMContentLoaded', function() {
    [... new Set([].concat(
        Array.from(document.querySelectorAll('[data-samehost-port]')),
        Array.from(document.querySelectorAll('[data-samehost-protocol]'))    
    ))]
    Array.from(document.querySelectorAll('[data-samehost-port]')).forEach(e=>{
        let port = '80'
        let path = e.getAttribute('href')
        const {hostname,protocol} = document.location
        if(e.hasAttribute('data-samehost-protocol')){
            protocol = e.getAttribute('data-samehost-protocol')
            e.removeAttribute('data-samehost-protocol')
        }
        if(e.hasAttribute('data-samehost-port')){
            port = e.getAttribute('data-samehost-port')
            e.removeAttribute('data-samehost-port')
        }
        if(port==='80') port=''
        e.href = `${protocol}//${hostname}${port?`:${port}`:''}${path}`
    })
})
</script>
...
你可以

只写http://[IP of the server]:[port of the server],而不仅仅是port.
在此示例中:<a href="http://127.0.0.1:8080">Look at the other port</a>

最新更新