浏览器中location详解

window.location对象用于获取当前页面的URL信息。

属性解析

1. href

当前页面的URL。

比如访问github.com，在控制台中输入location.href，则结果如下所示

https://github.com/
1

对href赋值可以进行URL跳转：

• 不携带协议，访问的当前域名对应的资源:

  在控制台中输入location.href = '/asset'，那么就会跳转到https://github.com/asset。

• 携带协议的话就跳转到新URL:
  在控制台中输入location.href = 'http://localhost:8080'，那么就会跳转到http://localhost:8080。

其他用法：
top.location.href=”url” 在顶层页面打开url（跳出框架）
self.location.href=”url” 仅在本页面打开url地址
parent.location.href=”url” 　 在父窗口打开Url地址
在页面中我们可能会嵌套一些iframe，以上top，self，parent就可以改变iframe中地址。

2. pathname

当前资源的路径。

比如访问github.com/vuejs，在控制台中输入location.pathname，则结果如下所示

/vuejs
1

对pathname赋值可以进行访问其他资源，跟href传入不带协议的用法相同，但是不会处理协议。
在控制台中输入location.pathname = 'http://localhost:8080'，访问的是github.com/vuejs/http:/localhost/asset。

3. host

当前页面域名，可能在该串最后带有一个:并跟上 URL 的端口号。

访问github.com，在控制台中输入location.host，结果如下所示：

github.com
1

访问localhost:8080，结果如下所示:

localhost:8080
1

对host赋值替换掉当前访问的域名，但是后边的资源路径并不会变

当前页面域名https://github.com/vuejs

在控制台中输入location.host = 'localhost:8080'，当前域名会变成https://localhost:8080/about。同样不解析协议。

4. hostname

当前页面域名（不包含端口号）

访问github.com，在控制台中输入location.hostname，结果如下所示：

github.com
1

访问localhost:8080，结果如下所示:

localhost
1

对hostname赋值替换掉当前访问的域名，但是后边的资源路径并不会变

当前页面域名https://github.com/vuejs

在控制台中输入location.host = 'localhost:8080'，当前域名会变成https://localhost:8080/about。同样不解析协议。

5. port

当前页面域名端口号.

访问github.com，在控制台中输入location.port，结果如下所示：

''
1

访问localhost:8080，结果如下所示:

8080
1

对port赋值替换掉当前访问的域名的端口，其他的并不会变

6. origin

当前页面来源的域名的标准形式。

访问github.com/vuejs，在控制台中输入location.origin，结果如下所示：

https://github.com
1

访问localhost:8080，结果如下所示:

http://localhost:8080
1

赋值并不会进行跳转

7. protocol

当前页面域名协议。

访问github.com/vuejs，在控制台中输入location.protocol，结果如下所示：

https:
1

赋值中如果没有协议或者不是标准域名形式都会报错

8. hash

包含页面URL标识中的 # 和后面 URL片段标识符

访问github.com，在控制台中输入location.hash，结果如下所示：

''
1

访问localhost:8080/#/about，结果如下所示:

#/about
1

通常在hash路由模式中使用到，而history模式则无用。

赋值会替换掉#后的字符

9. search

当前页面URL中?字符后面的查询参数。

在hash和history模式中，查询参数的获取并不同。

在history中，通过search获取。访问https://github.com/search?q=vue&type=，在控制台中输入location.search，结果如下所示：

?q=vue&type=

而在hash中，search则为空，#后边的全部字符都在hash属性中。访问http://localhost:8080/#/about?id=1，结果:

hash: '#/about?id=1',
search: ''
1
2

history模式中赋值会替换掉？后的字符，而hash模式直接插入到#字符前面

方法

1. reload

location.reload()
1

用来刷新当前页面，就像刷新按钮一样。

2. replace

location.replace(url);
1

替换当前页面的URL，不过当前页面不会保存到会话历史中。这样，用户点击回退按钮时，将不会再跳转到该页面。

3. assign

location.assign(url);
1

加载新文档