window.location对象

梦里梦外; 2022-12-24 09:53 169阅读 0赞

# [window.location对象详解][window.location] #

### window.location.href（当前URL） ###

> 结果如下：  
> [http://www.myurl.com:8866/test?id=123&username=xxx][http_www.myurl.com_8866_test_id_123_username_xxx]

### window.location.protocol（协议） ###

> 结果如下：  
> http:

### window.location.host（域名 + 端口） ###

> 结果如下：  
> [www.myurl.com:8866][www.myurl.com_8866]

### window.location.hostname（域名） ###

> 结果如下：  
> [www.myurl.com][]

### window.location.port（端口） ###

> 结果如下：  
> 8866

### window.location.pathname（路径部分） ###

> 结果如下：  
> /test

### window.location.search（请求的参数） ###

> 结果如下：  
> ?id=123&username=xxx

通常由于业务需要，前端页面中的某个数据源来源，需要我们去获取URL的某个参数值。这时封装一个输入参数名获取对应参数值的函数是必不可少的，如下所示：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

function getQuery(name) {
      // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);//substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用,但是它没有标准化
        if(r != null) {
          // 对参数值进行解码
            return unescape(r[2]); 
        }
        return null;
    }
    
    // 调用方法，注意需要传入String类型的数据，输出结果为String类型
    getQuery('id');   // '123'

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

不过unescape解码方法已经废除了。注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

### window.location.origin（'?'前边的URL） ###

> 结果如下：  
> [http://www.myurl.com:8866][www.myurl.com_8866]

[window.location]: https://www.cnblogs.com/gopark/p/10191577.html
[http_www.myurl.com_8866_test_id_123_username_xxx]: http://www.myurl.com:8866/test?id=123&username=xxx
[www.myurl.com_8866]: http://www.myurl.com:8866/
[www.myurl.com]: http://www.myurl.com/
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221120/39f5362fa26543958a2390d2edcb879a.png