BOM系列之Location对象

---

1、什么是location对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

2、URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link 

3、属性

3.1、ancestorOrigins

3.1.1、概述

Location 接口的 ancestorOrigins 只读属性是一个静态的 DOMStringList，倒序排列了此Location 对象所属文档先前所有浏览上下文的来源。

3.1.2、语法

const ancestors = location.ancestorOrigins;

3.2、hash

3.2.1、概述

Location 接口的 hash 属性返回一个 USVString，其中会包含 URL 标识中的 ‘#’ 和 后面 URL 片段标识符。

这里 fragment 不会经过百分比编码（URL 编码）。如果 URL 中没有 fragment，该属性会包含一个空字符串，“”

3.2.2、语法

string = object.hash;
object.hash = string;

3.3、host

3.3.1、概述

Location 接口的 host 属性是包含了主机的一段 USVString，其中包含：主机名，如果 URL 的端口号是非空的，还会跟上一个 ‘:’ ，最后是 URL 的端口号。

3.3.2、语法

string = object.host;
object.host = string;

3.4、hostname

3.4.1、概述

Location的 hostname 属性是包含了域名的一段 USVString。

3.4.2、语法

string = object.hostname;
object.hostname = string;

3.5、href

3.5.1、概述

Location 接口的 href 属性是一个字符串化转换器 (stringifier), 返回一个包含了完整 URL 的 USVString 值，且允许 href 的更新。

3.5.2、语法

string = object.href;
object.href = string;

3.6、origin

3.6.1、概述

Location接口的origin只读属性是一个字符串，其中包含所表示URL的原点的Unicode序列化。

3.6.2、值

一个字符串

3.7、pathname

3.7.1、概述

Location接口的pathname属性是一个包含该位置的URL路径的字符串，如果没有路径，则为空字符串。

3.7.2、值

一个字符串

3.8、port

3.8.1、概述

Location接口的port属性是一个包含URL的端口号的字符串。如果URL不包含显式的端口号，它将被设置为‘’。

3.8.2、值

一个字符串

3.9、protocol

3.9.1、概述

Location接口的protocol属性是一个表示URL的协议方案的字符串，包括最后的’:'。

3.9.2、值

一个字符串

3.10、search

3.10.1、概述

Location 接口的 search 属性会返回一段 USVString，其中包含一个 URL 标识中的 ‘?’ 以及跟随其后的一串 URL 查询参数。

现代浏览器提供 URLSearchParams 和 URL.searchParams 两个接口，使得从查询字符串中解析出查询参数变得更加容易。

3.10.2、语法

string = object.search;
object.search = string;

4、方法

4.1、assign()

4.1.1、概述

Location.assign() 方法会触发窗口加载并显示指定的 URL 的内容。

如果由于安全原因无法执行跳转，那么会抛出一个 SECURITY_ERROR 类型的 DOMException。当调用此方法的脚本来源和页面的 Location 对象中定义的来源隶属于不同域的时候，就会抛出上述错误。

如果传入了一个无效的 URL，则会抛出一个 SYNTAX_ERROR 类型的 DOMException。

4.1.2、语法

location.assign(url);

4.1.3、参数

• url

一个包含了要跳转到的链接的DOMString。

4.1.4、示例

// 跳转到 Location.reload() 这篇文章
document.location.assign("https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload");

4.2、reload()

4.2.1、概述

location.reload() 方法用来刷新当前页面，就像刷新按钮一样。

该方法在跨域调用（执行该方法的脚本文件的域和 Location 对象所在页面的域不同）时，将会抛出 SECURITY_ERROR DOMException 异常。

4.2.2、语法

location.reload();

4.3、replace()

4.3.1、概述

Location.replace() 方法以给定的 URL 来替换当前的资源。 与assign() 方法 不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中（session History），这样，用户点击回退按钮时，将不会再跳转到该页面。

因违反安全规则导致的赋值失败，浏览器将会抛出类型为 SECURITY_ERROR 的 DOMException 异常。当调用该方法的脚本所属的源与拥有 Location 对象所属源不同时，通常情况会发生这种异常，此时通常该脚本是存在不同的域下。

如果 URL 无效，浏览器也会抛出 SYNTAX_ERROR 类型的 DOMException 异常。

4.3.2、语法

object.replace(url);

4.3.3、参数

• url

DOMString 类型，指定所导航到的页面的 URL 地址。

4.3.4、示例

// Navigate to the Location.reload article by replacing this page
window.location.replace("https://developer.mozilla.org/en-US/docs/Web/API/Location/reload");

4.4、toString()

4.4.1、概述

toString()Location接口的 stringifier 方法返回包含整个 URL 的USVString}。它是Location.href的只读版本。

4.4.2、语法

string = object.toString();

4.4.3、示例

// Let's imagine an <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/Location/toString"> element is in the document
var anchor = document.getElementById("myAnchor");
var result = anchor.toString(); // Returns: 'https://developer.mozilla.org/en-US/docs/Location/toString'

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！