location.host vs location.hostname 和跨瀏覽器兼容性？

Question

與檢查用戶代理是否通過正確的域訪問相比，哪一個最有效。

如果他們使用某種 web 代理訪問域（因為它往往會破壞 js），我們想顯示一個基於 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+ 中非常確定它會存在嗎？

Answer 1

作為一個小備忘錄：交互式鏈接剖析

--

簡而言之（假設http://example.org:8888/foo/bar#bang的位置）：

• hostname給你example.org
• host給你example.org:8888

Answer 2

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

我假設您希望主機名僅獲取站點名稱。

Answer 3

如果您堅持使用window.location.origin您可以在閱讀origin之前將其放在代碼頂部

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

解決方案

PS：為了記錄，這實際上是最初的問題。 已經編輯過了：）

Answer 4

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

你真正想要的是：

/(^|\.)domain\.com$/

Answer 5

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

看起來你會得到相同的結果，但是hostname包含沒有括號或端口號的清晰主機名。

Answer 6

只是要添加一個注釋，即 Google Chrome 瀏覽器具有該位置的 origin 屬性。 它為您提供了從協議到端口號的整個域，如下面的屏幕截圖所示。