window.location对象详解

Js+JQuery helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

window.location 对象不仅可以获得当前页面的地址 (URL),还能够将浏览器重定向到新的页面。

在谷歌浏览器中打开调试工具,在Console一栏中输入 window.location,出现如下图所示:将会看到location的多个属性:

7148149-cbe25c60e5996d51.png

接下来以 http://www.helloweb.wang:8866/test?id=123&username=helloweb 作为栗子,介绍 location 有哪些常用属性:

window.location.href(返回当前URL)

结果如下:

http://www.helloweb.wang:8866/test?id=123&username=helloweb

window.location.protocol(协议)

结果如下:

http:

window.location.host(域名 + 端口)

结果如下:

www.helloweb.wang:8866

window.location.hostname(域名)

结果如下:

www.helloweb.wang

window.location.port(端口)

结果如下:

8866

window.location.pathname(路径部分)

结果如下:

/test

window.location.search(请求的参数)

结果如下:

?id=123&username=helloweb

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

function getQuery(name) {  // 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");    
    let r = window.location.search.substr(1).match(reg);    
    if(r != null) {      // 对参数值进行解码
        return unescape(r[2]); 
    }    
    return null;
}
    
// 调用方法,注意需要传入String类型的数据,输出结果为String类型
getQuery('id');   // '123'

window.location.origin('?'前边的URL)

结果如下:

http://www.helloweb.wang:8866


作者:ALOLONGHUN

原文链接:HelloWeb前端网 » window.location对象详解 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享