WebAPI-Location对象

偏执的太偏执、 2023-06-19 02:19 116阅读 0赞

`location` 对象是 window 的一个属性，该对象包含了当前 URL 的相关信息。

## URL ##

`URL` 统一资源定位符（ `Uniform Resource Locator` 的缩写），是互联网上标准资源的地址；互联网上的每一个资源文件都有属于自己的唯一的 URL。

url 的基本格式：

> Protocol://hostName\[:port\]/Path\[?query\]\#fragment

*  `Protocol` 通信协议；常见的协议有 http、ftp、maito 等
 *  `hostName` 主机名（域名）
 *  `[port]` 端口，是一个可选参数；省略时会使用默认的端口号
 *  `Path` 路径；有零个或多个 “/” 隔开的字符串；一般用来表示主机上的一级目录或文件地址
 *  `[query]` 查询参数；是键值对，键名与值之间用 “=” 连接，多个键值对用 “&” 隔开；可选
 *  `fragment` 信息片段 “\#” 后面的内容；多用于锚点链接

示例：  
![在这里插入图片描述][20191203232929761.png]

## location 对象的属性 ##

##### hash #####

`location.hash` 设置或返回 URL 中的锚部分（从 “\#” 开始的部分）设置时使用赋值的方式即可  
![在这里插入图片描述][20191204094648986.gif]

##### host #####

`location.host` 设置或返回 URL 中的主机名（域名）和端口部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

##### hostname #####

`location.hostname` 设置或返回 URL 中的主机名（域名）部分  
![在这里插入图片描述][20191204095343615.gif]

##### href #####

`location.href` 设置或返回当前文档完整的 URL  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

##### pathname #####

`location.pathname` 设置或返回当前 URL 中的路径部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]

##### port #####

`location.port` 设置或返回当前 URL 的端口部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

##### protocol #####

`location.prot` 设置或返回当前 URL 的协议部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]

##### search #####

`location.search` 设置或返回当前 URL 的查询部分（问号 “?” 之后的部分）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 5]

## location 对象的方法 ##

##### assign() #####

`location.assign(URL)` 该方法用于加载一个新的文档，会记录浏览历史所以可以实现后退功能；功能与 a 标签的 href 属性类似。

*  `URL` 资源地址

<button id="btn">跳转</button>
    <script> var btn = document.querySelector('#btn') btn.addEventListener('click', function() { // 加载新地址 location.assign('https://www.csdn.net/') }) </script>

![在这里插入图片描述][20191204145525453.gif]

##### replace() #####

`location.replace(URL)` 用新的文档替换当前的文档，该方法不会产生历史记录

<button id="btn">跳转</button>
    <script> var btn = document.querySelector('#btn') btn.addEventListener('click', function() { // 替换当前文档 location.replace('https://www.csdn.net/') }) </script>

![在这里插入图片描述][20191204150617741.gif]

##### reload() #####

`location.reload(forceGet)` 刷新当前文档；类似于浏览器上的刷新页面按钮。

*  `forceGet` 是一个布尔值，为 true 时会绕过缓存，直接从服务器上重新下载当前文档（相当于 ctrl+f5）。

[20191203232929761.png]: https://img-blog.csdnimg.cn/20191203232929761.png
[20191204094648986.gif]: https://img-blog.csdnimg.cn/20191204094648986.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204103537856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191204095343615.gif]: https://img-blog.csdnimg.cn/20191204095343615.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191204103651398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191204104337218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191204101402691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191204101856468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191204105657193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191204145525453.gif]: https://img-blog.csdnimg.cn/20191204145525453.gif
[20191204150617741.gif]: https://img-blog.csdnimg.cn/20191204150617741.gif