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 的兼容性？