浅谈location对象

简介

Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。通过Location对象，可以获取URL中的各项信息，调用对象方法也可以重新加载或替换当前文档。

在控制台输入window.location可以获取Location对象的详细信息：

对象属性

href

href属性是最常用的一种属性，通过window.location.href可以获取完整的URL。Location的对象属性都有一个特点，即对象属性都是writable，可以通过属性值的替换来重新设置属性值。这也引出了对象属性最常用的一种用法，通过重新设置href属性来跳转网页。

window.location.href = "www.baidu.com"

同源策略三兄弟

众所周知，所有浏览器全都采取同源策略，即：

• 协议相同
• 域名相同
• 端口相同

协议、域名、端口在Location对象中分别对应的属性是：protocol，hostname，port

window.location.href            // http://localhost:8080/#/b?a=1
window.location.protocol        // http:
window.location.hostname        // localhost
window.location.port            // 8080

很多时候，我们需要同时比对协议、域名和端口这三项属性是否全部相等，而一个个分别调用又太麻烦了，此时可以使用origin属性，该属性返回完整的协议和主机地址（包括端口）。

当需要主机地址的时候，可以调用host属性，该属性返回主机地址，即域名和端口。

window.location.href            // http://localhost:8080/#/b?a=1
window.location.origin          // http://localhost:8080
window.location.host            // localhost:8080

hash

Location对象拥有hash属性，用来获取从#开始的URL（锚）。#代表网页中的一个位置，它之后的字符串，就是该位置的标识符，又称为锚点。

window.location.href            // http://example.com:1234/test.htm#part2
window.location.hash            // #part2

pathname

pathname代表着URL的路径部分

window.location.href            // http://example.com:1234/test/test.htm#part2
window.location.pathname        // /test/test.html

search

search也是一个常用属性，用来获取URL的查询部分

window.location.href            // http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
window.location.search          // f=hdom_loc_search

tips：

1.使用window.location.search修改查询部分需要注意，不需要在key和value之间添加空格，因为空格自动会转为%20

2.当一个URL中#（hash）在?之前，使用hash属性会取到#开始的所有字符串，而search属性永远为空，因为当同时存在#和?时，search属性只能取到#之前的查询属性，而#之后的查询属性会被归入锚点字符串。该问题在vue中经常出现，因为使用vue-router进行路由跳转时，有时会使用query进行传参，传参是直接显示在URL中的，此时通过window.location.search取参会出现这个问题。

解决方案有两种：

• 通过vue-router的this.$route.query来取值，不通过window.location.search获取查询参数，当然，更建议通过params进行隐式传值，减少危险
• 使用vue-router的history模式来直接去除锚点

对象方法

assign方法

assign方法用于加载新的文档，接收一个参数，即新的文档的URL，效果类似于将该URL赋值给href属性。

window.location.assign("www.baidu.com")     // 跳转到www.baidu.com
window.location.href = "www.baidu.com"      // 效果同上

reload方法

reload方法用于重新加载当前文档，接收一个可选参数，值为布尔类型，默认为false代表是否强制重新加载。

window.location.reload()            // 类似于刷新
window.location.reload(false)       // 同上
window.location.reload(true)        // 强制重新加载

replace方法

replace方法类似于assign方法，加载新的文档，但是它与assign方法的不同在于，它是用新的URL替换History对象中的当前记录，相当于替换当前文档。

window.location.replace("www.baidu.com")        // history对象被替换