详解location对象

比眉伴天荒 2023-02-18 03:06 21阅读 0赞

首先控制打印看一下

### 1. location属性 ###

console.log(location)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

location是挂在window的对象也是document下的对象

window.location
    document.location
    location
    // 指的是同一个

以下方的url地址为例测试location

http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most

*  Location.href

包含整个URL地址返回

href: "http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most"

当location.href赋值时会跳转

location.href = 'http://www.baidu.com'   
    // 跳转

*  Location.protocol

包含URL对应协议 http 或者https，最后有一个":"。

protocol: "http:"

*  Location.host

包含了域名，可能在该串最后带有一个":"并跟上URL的端口号。

host: "127.0.0.1:8848"

*  Location.hostname

包含URL域名

hostname: "127.0.0.1"

*  Location.port

包含端口号。

port: "8848"

*  Location.pathname

包含URL中路径部分，开头有一个“/"。

pathname: "/testshare/location.html"

*  Location.search

包含URL参数，开头有一个“?”。

search: "?lang=en&name=zhangsan"

*  Location.hash

包含块标识符，开头有一个“\#”。 哈希值 vue-router中的哈希模式就是用这个。

hash: "#test/most"

*  Location.origin 只读

包含页面来源的域名，也是从哪个页面跳转来的

origin: "http://127.0.0.1:8848"

全部打印结果为

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

### 2. location的方法 ###

*  **Location.reload()**

`Location.reload()` 方法用来刷新当前页面。该方法只有一个参数，当值为 `true` 时，将强制浏览器从服务器加载页面资源，当值为 `false` 或者未传参时，浏览器则可能从缓存中读取页面。

location.reload(true);
    // 无缓存刷新页面（但页面引用的资源还是可能使用缓存，
    // 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求）

*  `Location.assign()`

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

document.location.assign('https://www.baidu.com');

*  `Location`**`.replace()`**

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

document.location.replace('https://www.baidu.com');

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200615160212314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200615161610851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[History]: https://developer.mozilla.org/zh-CN/docs/Web/API/History