Location 对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。

属性

Location对象提供以下属性。

• Location.href：整个 URL。
• Location.protocol：当前 URL 的协议，包括冒号（:）。
• Location.host：主机。如果端口不是协议默认的80和433，则还会包括冒号（:）和端口。
• Location.hostname：主机名，不包括端口。
• Location.port：端口号。
• Location.pathname：URL 的路径部分，从根路径/开始。
• Location.search：查询字符串部分，从问号?开始。
• Location.hash：片段字符串部分，从#开始。
• Location.username：域名前面的用户名。
• Location.password：域名前面的密码。
• Location.origin：URL 的协议、主机名和端口。

// 当前网址为
// http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol
// "http:"
document.location.host
// "www.example.com:4097"
document.location.hostname
// "www.example.com"
document.location.port
// "4097"
document.location.pathname
// "/path/a.html"
document.location.search
// "?x=111"
document.location.hash
// "#part1"
document.location.username
// "user"
document.location.password
// "passwd"
document.location.origin
// "http://user:passwd@www.example.com:4097"

这些属性里面，只有origin属性是只读的，其他属性都可写。

注意，如果对Location.href写入新的 URL 地址，浏览器会立刻跳转到这个新地址。

// 跳转到新网址
document.location.href = 'http://www.example.com';

这个特性常常用于让网页自动滚动到新的锚点。

document.location.href = '#top';
// 等同于
document.location.hash = '#top';

直接改写location，相当于写入href属性。

document.location = 'http://www.example.com';
// 等同于
document.location.href = 'http://www.example.com';

另外，Location.href属性是浏览器唯一允许跨域写入的属性，即非同源的窗口可以改写另一个窗口（比如子窗口与父窗口）的Location.href属性，导致后者的网址跳转。Location的其他属性都不允许跨域写入。

方法

（1）Location.assign()

assign方法接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串，则会报错。

// 跳转到新的网址
document.location.assign('http://www.example.com')

（2）Location.replace()

replace方法接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串，则会报错。

它与assign方法的差异在于，replace会在浏览器的浏览历史History里面删除当前网址，也就是说，一旦使用了该方法，后退按钮就无法回到当前网页了，相当于在浏览历史里面，使用新的 URL 替换了老的 URL。它的一个应用是，当脚本发现当前是移动设备时，就立刻跳转到移动版网页。

// 跳转到新的网址
document.location.replace('http://www.example.com')

（3）Location.reload()

reload方法使得浏览器重新加载当前网址，相当于按下浏览器的刷新按钮。

它接受一个布尔值作为参数。如果参数为true，浏览器将向服务器重新请求这个网页，并且重新加载后，网页将滚动到头部（即scrollTop === 0）。如果参数是false或为空，浏览器将从本地缓存重新加载该网页，并且重新加载后，网页的视口位置是重新加载前的位置。

// 向服务器重新请求当前网址
window.location.reload(true);

（4）Location.toString()

toString方法返回整个 URL 字符串，相当于读取Location.href属性。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com