如果我不知道主機名,是否有沒有Javascript /服務器端腳本鏈接到同一個盒子上不同端口號的方法?超鏈接中不同端口號的相對URL?
如:
<a href=":8080">Look at the other port</a>
(這個例子簡化版,工作,因爲它只會對待:8080作爲字符串我希望導航)
如果我不知道主機名,是否有沒有Javascript /服務器端腳本鏈接到同一個盒子上不同端口號的方法?超鏈接中不同端口號的相對URL?
如:
<a href=":8080">Look at the other port</a>
(這個例子簡化版,工作,因爲它只會對待:8080作爲字符串我希望導航)
這將是很好,如果這可以工作,我不明白爲什麼不能這樣做,因爲:
是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 = port[2];
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>
所以如果沒有JavaScript,那麼沒有真正的解決方案 – 2011-05-16 11:13:39
沒有Javascript沒有辦法做到這一點。 – 2011-05-16 11:53:54
這在Safari 6中無法正常工作。問題是你沒有從相對URL中刪除端口,所以你最終得到'http:// myhost:8080 /:8080'作爲'href =「 :8080" '。你可以在'target.port = port [1];下面加上這一行來解決這個問題。 'target.href = target.href.replace(「/:」+ target.port,「」);'(這不是一個完美的解決方案,因爲它是一個查找/替換,但它適用於你不是的簡單情況擔心網址中的端口字符串。) – zekel 2012-09-26 14:35:49
如果沒有JavaScript,您將不得不依賴某些服務器端腳本。例如,如果您使用ASP,如...
<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080">Look at the other port</a>
應該工作。但是,確切的格式將取決於您使用的技術。
這些怎麼樣:
修改端口號點擊:
<a href="/other/" onclick="javascript:event.target.port=8080">Look at another port</a>
然而,如果你將鼠標懸停在鏈接上,它並沒有顯示出與包括新的端口號的鏈接。直到你點擊它纔會添加端口號。另外,如果用戶右鍵單擊該鏈接並執行「複製鏈接位置」,則它們將獲得未經修改的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>
您的第一個解決方案適用於我的情況 - 謝謝。 – 2012-11-24 15:35:41
感謝您指出我注意到的警告。在我的情況下,警告並不重要,我更喜歡第一個解決方案的簡單性。我幾乎可以肯定,我已經提出了你的答案,但軟件似乎並不認爲,並且該軟件的內存可能比我的更可靠。我已經upvoted它(再次??)。 – 2012-11-26 23:24:30
我解決了這個謎題:我不小心提出了其他答案之一。哎呀。我沒有足夠的聲望來扭轉我意外的惡搞行爲。 – 2012-11-26 23:28:12
沒有必要的複雜的javascript:只需在你的主播後插入一個腳本節點,然後在javascript中獲取節點,並修改其屬性與window.location.origin的方法。
<a id="trans">Look at the other port</a>
<script>
document.getElementById('trans').href='http://'+window.location.origin+':8081';
</script>
id屬性必須是唯一的頁面寬度,因此您可能需要使用其他方法來檢索節點對象。
在Linux上使用apache和Firefox進行測試。
出於某種原因,這並不適合我 - 它將瀏覽器導向到「http // localhost:8081」,注意缺少的冒號。無論如何,我只是將Chrome協議部分完全移除了。 – joerick 2014-01-09 17:17:45
你是如何測試它的? – 2014-01-10 11:37:24
您可以使用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>
基於Gary Hole's answer,但在頁面加載而不是點擊時更改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="/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。)
這個我居然發現,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>
不錯的PHP解決方案!您可以省略協議,以便自動檢測: ADTC 2016-01-03 08:02:04
這是更好地生成URL服務器端:
// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">
// ASP.net
<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp">
修改鼠標懸停的端口號:
<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>
這是沒有退縮顯示不正確的鏈接的https://stackoverflow.com/a/13522508/1497139的改善。
http://stackoverflow.com/questions/8317059/relative-path-but-for-port檢查了這一點......它爲我工作 – 2016-07-05 03:47:44
因爲很多人在服務器端解決方案堆積如山, NGINX'$ http_host' var works,例如:'return 200'