JS BOM 篇 - location 对象

[jtwang7]

参考文章：

• 浏览器Location 对象，URL 对象，URLSearchParams 对象简析

location 对象

概念

location 对象是 BOM (浏览器对象模型) 提供的原生对象，提供 URL 相关的信息和操作方法。它不仅保存着当前加载文档的信息，也保存着把 URL 解析为离散片段后能够通过属性访问的信息。

获取方式

location 对象既是 window 的属性，也是 document 的属性，通过：

• window.location
• document.location

可以获取到 location 对象。

属性

location 对象内部提供了以下属性：

属性	值	说明
location.hash	"#contents"	URL 散列值(片段字符串)，从 # 开始后跟零或多个字符，若没有则返回空字符串
location.host	"www.wrox.com:80"	域名+端口号
location.hostname	"www.wrox.com"	域名
location.href	"http://www.wrox.com:80/WileyCDA/?q=javascript#contents"	当前加载页面完整的 URL
location.pathname	"/WileyCDA/"	URL 中的路径和(或)文件名
location.port	"80"	请求的端口
location.protocol	"http:"	当前页面 URL 的协议，包括 :
location.search	"?q=javascript"	URL 的查询字符串，以 ? 开头
location.username	"foouser"	域名前指定的用户名
location.password	"barpassword"	域名前指定的密码
location.origin	"http://www.wrox.com"	URL 的源地址，只读

属性值均返回字符串类型
除 locaition.origin 属性只读外，其余属性均可读写

方法

location 对象内部提供了以下方法：

方法	作用	示例
location.assign()	接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串，则会报错。	document.location.assign('http://www.example.com')
location.replace()	接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串，则会报错。	document.location.replace('http://www.example.com')
location.reload()	使得浏览器重新加载当前网址，相当于按下浏览器的刷新按钮。它接受一个布尔值作为参数。如果参数为true，浏览器将向服务器重新请求这个网页，并且重新加载后，网页将滚动到头部（即scrollTop === 0）。如果参数是false或为空，浏览器将从本地缓存重新加载该网页，并且重新加载后，网页的视口位置是重新加载前的位置。	document.location.reload(true)
location.toString()	返回整个 URL 字符串，相当于读取Location.href属性	document.location.toString()

location.replace() 与 location.assign() 方法的差异在于：replace 会在浏览器的浏览历史 history 里面删除当前网址。一旦使用了 replace 后，后退按钮就无法回到当前网页了，相当于在浏览历史里面，使用新的 URL 替换了老的 URL。

操作地址

可以通过修改 location 对象的属性值或调用方法来修改浏览器的地址：

调用方法

向 assign 或者 replace 方法内传入一个完整的 URL，代码执行时会立即启动导航到新的 URL，其中 assign 还会在浏览器历史记录中添加一条记录，而 replace 则是用新记录替换原有记录。

window.location.assign("http://www.wrox.com");
window.location.replace("http://www.wrox.com");

修改 location 对象属性

通过给 location.href 设置一个 URL ，或者直接赋值给 location 对象一个 URL，都会在 URL 设置完成后执行跳转，等同于 location.assign()

window.location = "http://www.wrox.com";
document.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

修改浏览器地址的方法中，最常用 location.href
除设置 location.hash 外，其余 location 属性的修改均会导致页面重新加载新的 URL。location.hash 常常被应用于页面锚点滚动，因为它不会触发浏览器的刷新渲染
location.href 属性是浏览器唯一允许跨域写入的属性，即非同源的窗口可以改写另一个窗口（比如子窗口与父窗口）的location.href 属性，导致后者的网址跳转。location 的其他属性都不允许跨域写入。