Html 超链接中不同端口号的相对 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6016120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative URL to a different port number in a hyperlink?
提问by Ciaran McNulty
Is there a way without Javascript / server-side scripting to link to a different port number on the same box, if I don't know the hostname?
如果我不知道主机名，有没有办法在没有 Javascript/服务器端脚本的情况下链接到同一个盒子上的不同端口号？
e.g.:
例如：
<a href=":8080">Look at the other port</a>
(This example does't work as it'll just treat :8080 as a string I want to navigate to)
（此示例不起作用，因为它只会将 :8080 视为我要导航到的字符串）
采纳答案by Gary Green
It would be nice if this could work, and I don't see why not because :is a reserved character for port separation inside the URI component, so the browser could realistically interpret this as a port relative to this URL, but unfortunately it doesn't and there's no way for it to do that.
如果这可以工作就好了，我不明白为什么不因为:是 URI 组件内部用于端口分离的保留字符，因此浏览器可以实际将其解释为相对于该 URL 的端口，但不幸的是它没有t 并且没有办法做到这一点。
You'll therefore need Javascript to do this;
因此，您需要 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);
Tested in Firefox 4
在 Firefox 4 中测试
Fiddle:http://jsfiddle.net/JtF39/79/
小提琴：http : //jsfiddle.net/JtF39/79/
Update: Bug fixed for appending port to end of url and also added support for relative and absolute urls to be appended to the end:
更新：修复了将端口附加到 url 末尾的错误，并添加了对将相对和绝对 url 附加到末尾的支持：
<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>
回答by Craig McQueen
How about these:
这些怎么样：
Modify the port number on click:
单击时修改端口号：
<a href="/other/" onclick="javascript:event.target.port=8080">Look at another port</a>
However, if you hover your mouse over the link, it doesn't show the link with new port number included. It's not until you click on it that it adds the port number. Also, if the user right-clicks on the link and does "Copy Link Location", they get the unmodified URL without the port number. So this isn't ideal.
但是，如果您将鼠标悬停在链接上，它不会显示包含新端口号的链接。直到您单击它，它才会添加端口号。此外，如果用户右键单击链接并执行“复制链接位置”，他们将获得没有端口号的未修改 URL。所以这并不理想。
Here is a method to change the URL just after the page loads, so hovering over the link or doing "Copy Link Location" will get the updated URL with the port number:
这是在页面加载后立即更改 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>
回答by Kurt Schultz
You can do it easily using document.write and the URL will display correctly when you hover over it. You also do not need a unique ID using this method and it works with Chrome, FireFox and IE. Since we are only referencing variables and not loading any external scripts, using document.write here will not impact the page load performance.
您可以使用 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>
回答by Wolfgang Fahl
Modify the port number on mouseover:
鼠标悬停时修改端口号：
<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>
This is an improvement of https://stackoverflow.com/a/13522508/1497139which doesn't have the draw back of not showing the link correctly.
这是对https://stackoverflow.com/a/13522508/1497139的改进，它没有没有正确显示链接的缺点。
回答by gdt
Without JavaScript, you'll have to rely on some server side scripting. For example, if you're using ASP, something like ...
如果没有 JavaScript，您将不得不依赖一些服务器端脚本。例如，如果您使用的是 ASP，则类似于...
<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080">Look at the other port</a>
should work. However, the exact format will depend on the technology you are using.
应该管用。但是，确切的格式将取决于您使用的技术。
回答by Landis Arnold
After wrestling with this I found actually that SERVER_NAME is a reserved variable. So, if you are on page (www.example.com:8080) you should be able to drop the 8080 and invoke another port. For instance this modified code just worked for me and moves me from any base port to port 8069 (replace your port as required)
在与这个搏斗之后，我发现实际上 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>
回答by T30
It's better to get the url from the server variables:
最好从服务器变量中获取 url：
// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">
// ASP.net
<a href='<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp'>
回答by MUY Belgium
No need of complicated javascript : simply insert a script node after your anchor, then get the node in javascript, and modify its hrefproperty with the window.location.originmethod.
不需要复杂的 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>
The id property must be unique page wide, so you may want to use other method to retrieve node objects.
id 属性必须是唯一的页面宽度，因此您可能需要使用其他方法来检索节点对象。
Tested with apache and Firefox on Linux.
在 Linux 上使用 apache 和 Firefox 进行测试。
回答by a_rahmanshah
This solution looks cleaner to me
这个解决方案对我来说看起来更干净
<a href="#"
onclick="window.open(`${window.location.hostname}:8080/someMurghiPlease`)">
Link to some other port on the same host
</a>
回答by Sam Hasler
Based on Gary Hole's answer, but changes urls on page load instead of on click.
基于Gary Hole 的回答，但在页面加载而不是点击时更改 url。
I wanted to show the url using css:
我想使用 css 显示网址：
a:after {
content: attr(href);
}
So I needed the anchor's href to be converted to contain the actual url that would be visited.
所以我需要将锚点的 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>
}
}
}
Call the above function on page load.
在页面加载时调用上述函数。
or on one line:
或在一行上：
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];}}
(I'm using forinstead of forEachso it works in IE7.)
（我正在使用for而不是forEach它在 IE7 中工作。）
