window.location对象详解

window.location 介绍

window.location，计算机语言，用于获取URL。

window.location方法获取URL中字段介绍

统一资源定位符 (Uniform Resource Locator, URL)，完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

• scheme:通信协议。常用的http,ftp,maito等
• host:主机。服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
• port:端口号。整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
• path:路径。由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
• query:查询。可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/asp.net等技术制作的网页）传递参数，可有多个参数，用"&“符号隔开，每个参数的名和值用”="符号隔开。
• fragment:信息片断。字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

window.location对象详解

• window.location.href（当前URL）
  结果如下：
  http://www.0471seo.com:8866/test?id=123&username=xxx

• window.location.protocol（协议）
  结果如下：
  http:

• window.location.host（域名 + 端口）
  结果如下：
  www.0471.com:8866

• window.location.hostname（域名）
  结果如下：
  www.0471seo.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'

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

• window.location.origin（’?'前边的URL）
  结果如下：
  http://www.myurl.com:8866