window.location对象不仅可以获得当前页面的地址(URL),还能够将浏览器重定向到新的页面。
打开google浏览器,调出调试工具,在console一栏中输入window.location,出现如图所示(包含location的多个属性):
接下来以 http://www.myurl.com:8866/test?id=123&username=xxx 为例子,介绍一下location的常用属性:
1.window.location.href (当前URL)
结果为:http://www.myurl.com:8866/test?id=123&username=xxx
2.window.location.protocol(协议)
结果为:http:
3.window.location.host(域名+端口)
结果为:www.myurl.com:8866
4.window.location.hostname(域名)
结果为:www.myurl.com
5.window.location.port(端口)
结果为:8866
6.window.location.pathname(路径部分)
结果为:/test
7.window.location.search(请求的参数)
结果为:?id=123&username=xxx
通常由于业务需要,需要我们去获取URL的某个参数值。这时封装一个输入参数名获取对应参数值的函数是必不可少的。如下所示:
function getQuery(name) {
// 正则: [找寻'&' + 'url参数名字' = '值' + '&'] ('&'可以不存在)
let reg = new RegExp("(^|&)"+ name + "=([^&]*)(&|$)");
let r = window.location.search.match.substr(1).match(reg);
if (r != null) {
// 对参数值进行解码
return unescape(r[2]);
}
return null;
}
// 调用方法,注意需要传入String类型的数据,输出结果为String类型
getQuery('id'); //'123'
8.window.location.origin('?'前面的URL)
结果为:http://www.myurl.com:8866