window.location对象实例详解

一、前言

Window.location 只读属性返回一个 Location 对象，其中包含当前标签页文档的网页地址信息。

Window.location 是一个只读 Location 对象，但是我们仍然可以去重新赋值更改对象值。

下面就让我们详细介绍一下location的常用属性和方法；

二、location 实例属性

下面是简单的一个location实例数据展示：

2.1 href 文档地址URL

location.href 设置或返回整个文档地址URL，也可以通过location.href = "新地址"进行跳转。

2.2 protocol 文档地址的协议

location.protocol 返回整个文档协议（例如http、https、ftp等），如上图就是http

2.3 host 文档地址主机名和端口号

location.host 设置或返回主机名和当前 URL 的端口号，如上图就是localhost:3000

2.4 hostname 文档地址的主机名

location.hostname 设置或返回主机名。如上图就是localhost

2.5 port 文档地址的端口号

location.port 设置或返回端口号；如上图就是3000。host就是hostname + port；

2.6 pathname 文档地址的路径部分

location.pathname 设置或返回路径部分。如上图就是/menu/list

2.7 search 文档地址的携带参数

location.search 设置或返回路径部分。如上图就是?id=12

2.8 hash 文档地址的锚点参数

location.hash 设置或返回锚点参数。上图并没有锚点，一般用于文章浏览标题之间的跳转。

三、location 实例方法

3.1 assign() 覆盖当前文档对象

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

3.2 reload() 重新加载当前文档

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

3.3 replace() 替换当前文档对象

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

3.4 toString() 返回文档URL地址

包含整个 URL。它和读取location.href的效果相同。但是用它是不能够修改 Location 的值的。