JS location属性 方法详解

URL组成

先提一下URL的各部分组成：协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分

例如一个URL：

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732423

1. 协议部分：协议部分为“http：”，这代表网页使用的是HTTP协议。在”HTTP”后面的“//”为分隔符

2. 域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用

3. 端口部分：域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口

4. 虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”

5. 文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名

6. 参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

7. 锚部分：HTTP请求不包括锚部分，从“#”开始到最后，都是锚部分。本例中的锚部分是“#r_70732423“。锚部分也不是一个URL必须的部分。

location对象属性

• hash
  location.hash： 可查看当前URL的锚部分，如上个例子中的#r_70732423
• host
  location.host： 返回当前URL的主机名和端口，如 www.aspxfans.com:8080
• hostname
  location.hostname： 返回URL的主机名，如www.aspxfans.com
• port
  location.port： 返回一个URL服务器使用的端口号，如果是默认端口号,将没有返回
• href
  location.href： 返回当前页完整的URL
• pathname
  location.pathname： 返回的URL路径名，如news/index.asp
• protocol
  location.protocol： 返回当前URL的协议部分，如http:
• search
  location.search： 返回URL的查询部分（问号 ? 之后的部分），如?boardID=5&ID=24618&page=1#r_70732423

location对象方法

• assign()
  location.assign(URL); 加载一个新的文档(所有主要浏览器都支持 assign() 方法)
• reload()
  location.reload(forceGet); 用于刷新当前文档,类似于浏览器上的刷新页面按钮(所有主要浏览器都支持 reload() 方法)
  参数forceGet为Boolean值，可选。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。
• replace()
  location.replace(newURL); 用于替换当前文档(所有主要浏览器都支持 replace() 方法)

assign()和replace()存在一些区别：

window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的。

参考文章： https://blog.csdn.net/irony0egoist/article/details/81019440