前端必备基础知识：window.location 详解

Posted 2023-05-01

参考技术A

前端开发人员对 window.location 对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。

我们以一个常见的 URL 为例，看看 window.location 包含哪些属性和方法。

window.location 含义 .origin URL 基础地址，包括协议名、域名和端口号 .protocol 协议 ( http: 或 https: ) .host 域名+端口号 .hostname 域名 .port 端口号 .pathname 路径(以 / 开头) .search 查询字符串，以 ? 开头 .hash 页面锚点，以 # 开头 .href 完整 URL

比较容易混淆的是 host 和 hostname 这两个属性，区别是前者还包含了端口号。

以上属性除了 origin 是只读属性，其他都可以修改。修改后的效果就是跳转到相应的新地址。

window.location 返回 Location 类型的一个实例对象，包含当前页面的地址信息。可以通过以下几种方式访问：

这几个变量都是等价的，因为它是全局变量。但是建议避免直接用 location 变量，因为很容易跟其他局部变量混淆，造成不必要的麻烦。比如：

推荐用 window.location ，这样一眼就可以看出用的是全局变量。

window.location 动作

.assign() 导航到指定 URL .replace() 导航到指定 URL并删除当前页面的访问记录 .reload() 重新加载当前页面 .toString() 返回 URL 字符串

.toString() 和 .href 都是返回 URL，它们之间有区别吗？结果是一样的，性能上稍微有点差别。通过 JSPerf 上的性能测试结果可以看出， .href 稍快，通过 window.location 拼接字符串的形式速度最慢。

.assign() 和直接修改 href 是等价的，那么它们跟 .replace() 的区别是什么呢？

.assign() 在跳转新地址的同时会留下当前页面的访问记录，点击浏览器返回按钮会回到原来的页面， .replace() 则不会保留。

.assign() 执行流程：

.replace() 执行流程：

这个特性在用 JS 控制页面导航时非常重要，稍不注意会造成意外的的页面回退地址。

js基础之Window Location(BOM)

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
window.location 对象可不带 window 前缀书写。

一些例子：

• window.location.href 返回当前页面的 href (URL)
• window.location.hostname 返回 web 主机的域名
• window.location.pathname 返回当前页面的路径或文件名
• window.location.protocol 返回使用的 web 协议（http: 或 https:）
• window.location.assign 加载新文档