在前端开发中，经常需要获取当前运行页面的域名。在 JavaScript 中，我们可以使用 location 对象来访问当前页面的 URL 信息。其中，location.hostname 和 location.host 属性可以用来获取当前页面的主机名（hostname）和主机名和端口号（host），它们看起来很相似，但实际上有着不同的含义和用法。
location.hostname
location.hostname 属性返回当前页面所在服务器的主机名，不包含端口号。例如，https://www.example.com:8080/path/to/page.html 的 location.hostname 是 www.example.com。该属性的类型为字符串。
------------------------------- -- ---------------
location.host
location.host 属性返回当前页面所在服务器的主机名和端口号，格式为 hostname:port。例如，https://www.example.com:8080/path/to/page.html 的 location.host 是 www.example.com:8080。该属性的类型为字符串。
--------------------------- -- -------------------
值得注意的是，在默认情况下，如果当前页面的 URL 没有明确指定端口号，那么 location.host 将自动填充默认端口号，如 https://www.example.com 的 location.host 将返回 www.example.com:443。
跨浏览器的兼容性
大多数现代浏览器都支持 location.hostname 和 location.host 属性，包括 Chrome、Firefox、Safari、Opera 和 Edge。但是，在某些旧版浏览器中，这两个属性可能会出现不同的行为。
在 Internet Explorer 8 及更早版本中，location.hostname 返回的字符串不包含末尾的点号（.），而 location.host 则包含。例如，http://www.example.com. 的 location.hostname 在 IE8 中将返回 www.example.com，而 location.host 将返回 www.example.com.。这种差异可能会导致一些问题，因此在编写跨浏览器兼容代码时需要格外小心。
示例代码
以下是一个演示如何使用 location.hostname 和 location.host 来获取当前页面主机名和主机名及端口号的示例代码：
-- ---------- --- -------- - ------------------ ---------------------- -- -------------- --- ---- - -------------- ------------------
总结
本文介绍了 location.hostname 和 location.host 属性的区别和用法，以及在某些旧版浏览器中可能出现的兼容性问题。在实际开发中，我们应该根据具体需求选择合适的属性来获取当前页面的主机名信息，并编写跨浏览器兼容的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8702