window的location对象详解

文件转载处-简书：window.location对象详解

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