赞
踩
作者简介:
李中凯
八年多工作经验 前端负责人,
擅长JavaScript/Vue。
掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公众号:1024译站
前端开发人员对 window.location
对象应该不陌生,通过它不但可以获取当前页面的地址信息,还可以修改某些属性,实现页面跳转和刷新等。
我们以一个常见的 URL 为例,看看window.location
包含哪些属性和方法。
- window.location.href → 'https://www.jianshu.com/search?q=JS#comments'
- .origin → 'https://www.jianshu.com'
- .protocol → 'https:'
- .host → 'www.jianshu.com'
- .hostname → 'www.jianshu.com'
- .port → ''
- .pathname → '/search/'
- .search → '?q=JS'
- .hash → '#comments'
- window.location.assign('url')
- .replace('url')
- .reload()
- .toString()
window.location | 含义 |
---|---|
.origin | URL 基础地址,包括协议名、域名和端口号 |
.protocol | 协议 (http: 或 https: ) |
.host | 域名+端口号 |
.hostname | 域名 |
.port | 端口号 |
.pathname | 路径(以/ 开头) |
.search | 查询字符串,以? 开头 |
.hash | 页面锚点,以# 开头 |
.href | 完整 URL |
比较容易混淆的是host
和hostname
这两个属性,区别是前者还包含了端口号。
以上属性除了origin
是只读属性,其他都可以修改。修改后的效果就是跳转到相应的新地址。
- window.location.protocol = 'https'
- .host = 'localhost:8080'
- .hostname = 'localhost'
- .port = '8080'
- .pathname = 'path'
- .search = 'q=vue' // (不需要带 ?)
- .hash = 'target' // (不需要带 #)
- .href = 'https://www.kaysonli.com'
window.location
返回 Location
类型的一个实例对象,包含当前页面的地址信息。可以通过以下几种方式访问:
- window.location → Location
- window.document.location → Location
- document.location → Location
- location → Location
这几个变量都是等价的,因为它是全局变量。但是建议避免直接用location
变量,因为很容易跟其他局部变量混淆,造成不必要的麻烦。比如:
- location.protocol; // 'https'
-
- function localFile() {
- const location = '/vue';
-
- return location.protocol;
- // ❌ undefined
- // 这里的局部变量 "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()
执行流程:
- 1. 打开空白页
- 2. 访问 www.kaysonli.com (当前页)
-
- 推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。