本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

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

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

苏南大叔:客户端js取得页面域名的两个途径对比 - 封面图
客户端js取得页面域名的两个途径对比(图6-1)

方案预览

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

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

苏南大叔:客户端js取得页面域名的两个途径对比 - 三者返回同样的结果
客户端js取得页面域名的两个途径对比(图6-2)

特殊情况

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

苏南大叔:客户端js取得页面域名的两个途径对比 - 一个系统错误页面
客户端js取得页面域名的两个途径对比(图6-3)

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

苏南大叔:客户端js取得页面域名的两个途径对比 - 系统错误页面返回值
客户端js取得页面域名的两个途径对比(图6-4)

分解window.location

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

苏南大叔:客户端js取得页面域名的两个途径对比 - 正常情况下
客户端js取得页面域名的两个途径对比(图6-5)

苏南大叔:客户端js取得页面域名的两个途径对比 - 异常情况下
客户端js取得页面域名的两个途径对比(图6-6)

对于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相关经验文章。请点击苏南大叔的相关链接。

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