如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

在书写js代码的时候,常常有需求,需要获得当前js运行环境的网址的域名。那么就会有几种写法,通常来说,着几种写法都是等同的,会返回一致的值。但是,偶然间,苏南大叔发现,其实,他们之前还是有所差别的。

苏南大叔在本文中,对比两个常见的客户端js语句。这里说客户端,就是针对node来说的。本文说的仅仅是最普通常见的运行在浏览器里面的js

客户端js取得页面域名的两个途径对比 - 封面图

方案预览

99.9%的情况下,下面三条语句是等同的。

document.domain;
window.location.host;
window.location.hostname;

客户端js取得页面域名的两个途径对比 - 三者返回同样的结果

特殊情况

在网络错误的情况下,三条语句开始发生了微妙的变化。

客户端js取得页面域名的两个途径对比 - 一个系统错误页面

这种错误页面下,请看不同的返回值。

客户端js取得页面域名的两个途径对比 - 系统错误页面返回值

分解window.location

window.location可以分解出很多内容。

客户端js取得页面域名的两个途径对比 - 正常情况下

客户端js取得页面域名的两个途径对比 - 异常情况下

对于url https://newsn.net/about.html?aaa=bbb#123window.location信息分解如下:

hash : "#123"
host : "newsn.net"
hostname : "newsn.net"
href : "https://newsn.net/about.html?aaa=bbb#123"
origin : "https://newsn.net"
pathname : "/about.html"
port: ""
protocol: "https:"
search:"?aaa=bbb"

值得注意的几点是:

  • hash带#
  • pathname 带/
  • search 带?
  • port为空

总结

document.domain必须是正常的页面,才能成立,否则为空。window.location恒定有效。但是页面异常的时候,分解的url并非显示在地址栏中的那一个。

感谢您的阅读,如果想继续阅读js相关经验文章。请点击苏南大叔的相关链接。

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。