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

一、 属性

1.1、示例

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

window.location.href     → 'https://www.jianshu.com/search?q=JS#comments' //包含整个 URL
               .origin   → 'https://www.jianshu.com' // 包含页面来源的域名的标准形式
               .protocol → 'https:' //协议
               .host     → 'www.jianshu.com'   //域名 + 端口
               .hostname → 'www.jianshu.com' //域名
               .port     → '' //端口
               .pathname → '/search/' //路径部分
               .search   → '?q=JS' //包含 URL 参数开头有一个`“?”`
               .hash     → '#comments' //包含块标识符开头有一个 `#`。

1.2、window.location 属性一览表

.protocol协议 (http: 或 https:)
.host域名+端口号
.hostname域名
.port端口号
.pathname路径(以/开头)
.search查询字符串，以?开头
.hash页面锚点，以#开头
.href完整 URL

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

1.3、修改属性值

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

window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'q=vue' // (不需要带 ?)
               .hash     = 'target' // (不需要带 #)
               .href     = 'https://www.kaysonli.com'

1.4、如何访问 Location 对象

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

window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location

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

二、window.location 方法一览表

2.1、window.location.assign('url')

加载给定 URL 的内容资源到这个 Location 对象所关联的对象上。

2.2、window.location.reload()

重新加载来自当前 URL 的资源。他有一个特殊的可选参数（默认为false），类型为布尔值，该参数为 true 时会导致该方法引发的刷新一定会从服务器上加载数据，也会清除表单数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

2.3、window.location.replace()

用给定的 URL 替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

2.4、window.location.toString()

返回一个DOMString，包含整个 URL。它和读取URLUtils.href的效果相同。但是用它是不能够修改 Location 的值的。

2.5、混淆点

• .toString()和.href都是返回 URL，它们之间有区别吗？

• 结果是一样的，性能上稍微有点差别。

• .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. 回到   空白页