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