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

时间:2011-05-16 10:34:57

标签: html

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

e.g:

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

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

11 个答案:

答案 0 :(得分:75)

这些怎么样:

点击修改端口号:

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

答案 1 :(得分: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);

在Firefox 4中测试

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


更新:修正了将端口附加到网址末尾的错误,并添加了对附加到末尾的相对网址和绝对网址的支持:

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

答案 2 :(得分:47)

您可以使用document.write轻松完成,当您将鼠标悬停在其上时,网址会正确显示。您也不需要使用此方法的唯一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>

答案 3 :(得分:9)

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

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

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

答案 4 :(得分:4)

如果没有JavaScript,您将不得不依赖某些服务器端脚本。例如,如果你正在使用ASP,那就像......

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

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

答案 5 :(得分: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>

答案 6 :(得分:2)

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

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

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

答案 7 :(得分:1)

不需要复杂的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进行测试。

答案 8 :(得分:1)

基于Gary Hole's answer,但在页面加载时更改网址而不是点击。

我想使用css显示网址:

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

所以我需要将锚点的href转换为包含将要访问的实际URL。

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而不是@Override public int delete(Uri uri, String selection, String[] selectionArgs) { int count = myDBHelper.getWritableDatabase().delete(UcanContract.Tasks.DATABASE_TABLE, UcanContract.Tasks._ID + " = " + selection, selectionArgs); getContext().getContentResolver().notifyChange(uri, null); return count; } ,所以它适用于IE7。)

答案 9 :(得分:1)

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

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

答案 10 :(得分:0)

我看过的所有答案(我都会说,我并没有全部读懂)都将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()">
...
相关问题