location.host vs location.hostname 和 cross-browser 的兼容性？

問題描述

哪一個是最有效的，而不是檢查用户代理是否通過正確的域訪問。

如果他們使用某種 Web 代理訪問域，那麼我們想顯示一個小型的基於 js 的’top bar’ 樣式警告 (因為它會打破 js) 。

我們正在考慮使用以下內容：

var r = /.*domain.com$/;
if (r.test(location.hostname)) {
    // showMessage ...
}

這將照顧我們曾經使用的任何子域。

我們應該使用主機或主機名？

在 Firefox 5 和 Chrome 12 中：

console.log(location.host);
console.log(location.hostname);

.. 顯示兩者相同。

是因為端口實際上不在地址欄中嗎？

主機包含端口號 W3Schools 。

是否應該對 location.host/hostname 進行驗證，或者我們可以確定 IE6 +和其他所有它將存在？

最佳解決方案

作為一個小備忘錄：interactive link anatomy

次佳解決方案

主機只包含一個指定的端口號。如果 URL 中沒有特定的端口號，則返回與主機名相同的端口號。你選擇是否關心匹配端口號。有關更多信息，請參閲 https://developer.mozilla.org/en/window.location 。

我會假設你想要主機名只是獲取站點名稱。

第三種解決方案

如果您堅持使用 window.location.origin 您可以在閲讀 origin 之前將其放在您的代碼之上

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Solution

第四種方案

你的主要問題已經在上面得到回答。我只想指出你使用的正則表達式有一個錯誤。 foo-domain.com 不是 domain.com 的子域也將成功

你真正想要的是這樣的：

/(^|.)domain.com$/

第五種方案

MDN：https://developer.mozilla.org/en/DOM/window.location

看來，您將獲得相同的結果，但 hostname 包含明確的主機名稱，不帶括號或端口號。

參考文獻

location.host vs location.hostname and cross-browser compatibility?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

location.host vs location.hostname 和 cross-browser 的兼容性？