前端开发人员对?window.location对象应该不陌生,通过它不但可以获取当前页面的地址信息,还可以修改某些属性,实现页面跳转和刷新等。
我们以一个常见的 URL 为例,看看window.location包含哪些属性和方法。
window.location.href → 'http://08643.cn/search?q=JS#comments'
? ? ? ? ? ? ? .origin? → 'http://08643.cn'
? ? ? ? ? ? ? .protocol → 'https:'
? ? ? ? ? ? ? .host? ? → '08643.cn'
? ? ? ? ? ? ? .hostname → '08643.cn'
? ? ? ? ? ? ? .port? ? → ''
? ? ? ? ? ? ? .pathname → '/search/'
? ? ? ? ? ? ? .search? → '?q=JS'
? ? ? ? ? ? ? .hash? ? → '#comments'
window.location.assign('url')
? ? ? ? ? ? ? .replace('url')
? ? ? ? ? ? ? .reload()
? ? ? ? ? ? ? .toString()
如何访问 Location 对象
window.location返回?Location?类型的一个实例对象,包含当前页面的地址信息??梢酝ü韵录钢址绞椒梦剩?/p>
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 方法一览表
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 (当前页)
3. 加载新页面? `window.location.assign('https://www.w3schools.com')`
4. 点击浏览器返回按钮
5. 回到? www.kaysonil.com
.replace()执行流程:
1. 打开空白页
2. Go to www.kaysonli.com (当前页)
3. 加载新页面? `window.location.assign('https://www.w3schools.com')`
4. 点击浏览器返回按钮
5. 回到? 空白页
这个特性在用 JS 控制页面导航时非常重要,稍不注意会造成意外的的页面回退地址。.