window.location对象详解

最新推荐文章于 2025-01-16 09:33:33 发布

weixin_30905133

最新推荐文章于 2025-01-16 09:33:33 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/gopark/p/10191577.html

本文深入探讨了如何使用JavaScript的window.location对象解析URL的各个组成部分，包括协议、域名、端口、路径和请求参数等。并通过一个实用的函数演示了如何从URL中提取特定的参数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.location.href（当前URL）

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

window.location.protocol（协议）

结果如下：
http:

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

结果如下：
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的某个参数值。这时封装一个输入参数名获取对应参数值的函数是必不可少的，如下所示：

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'