从零开始学前端 - 25. JS BOM之Location对象详解及实际应用

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

  Location 对象是 BOM 中相当重要的一个对象，包含了有关当前页面的所有与 URL 有关的内容。window.location 和 document.location 都是 Location 对象的引用。

一、Location对象的属性

• href：返回当前页面的完整 URL；
• protocol：返回当前页面使用的传输协议，通常为 http 和 https；
• host：返回当前页面所在的服务器域名（IP）和端口号；
• hostname：返回当前页面所在的服务器域名（或IP）；
• port：返回当前页面所在服务器的端口号，通常为80端口，被省略；
• pathname：返回当前页面的路径（返回当前页面所处的目录和文件名）；
• search：返回当前页面的所有参数；
• hash：返回当前页面中的锚点；

具体效果如下所示：

  另外，对 location中除了hash之外的属性就行修改时，都会在当前页中以新的 URL 重新打开页面，且会给浏览器添加一条新的浏览记录。

二、Location对象的方法

1. location.assign() 打开新页面

  语法：location.assign(URL)
  作用：在当前窗口加载 URL。
  实例：

location.assign("http://www.baidu.com");

• 我们一般都会使用 location.href 来在当前窗口打开新页面；

2. location.reload() 刷新当前页

  语法：location.reload(Boolean)
  作用：刷新当前页面，Boolean 表示是否使用缓存。
  实例：

// 不使用缓存，从服务器重新加载该页面。
location.reload(true);
// 使用缓存
location.reload(