location 对象
location
提供了当前窗口中加载文档的信息,以及通常的导航功能。既是 window
的属性,也是 document
的属性。可以用 window.location
和 document.location
使用。
假设 URL :http://xkcuser:xkcpassword@www.xkc.com:80/xkc/?name=xkc#xkc
location
对应 URL 的属性内容如下:
属性 | 值 | 说明 |
---|---|---|
location.hash | “#xkc” | URL散列值(#后面的字符),没有则为空 |
location.host | “www.xkc.com.80” | 服务器名以及端口号 |
location.hostname | “www.xkc.com” | 服务器名 |
location.href | “http://www.xkc.com:80/xkc/?name=xkc#xkc” | 加载页面完整的 URL 。location 的 toString() 方法也返回这个值 |
location.pathame | “/xkc/” | URL 中的路径和(或者)文件名 |
location.port | “80” | 请求的端口 |
location.protocol | “http:” | 协议。通常是"http:" 或 “https:” |
location.search | “?name=xkc” | URL 的查询字符串。以 ? 开头 |
location.username | “xkcuser” | 域名前指定的用户名 |
location.password | “xkcpassword” | 域名前指定的密码 |
location.origin | “http://www.xkc.com” | URL 的源地址。只读 |
查询字符串
由于 location.search
查询到的是 “?[key]=[value]&[key]=[value]” 这样的字符串。要获得对应的键值对,需要进行查询。
let getQueryStringArgs = function () {
let qs = location.search ? location.search.substring(1) : "",
args = {};
for (let item of qs.split("&").map((k) => k.split("="))) {
let name = decodeURIComponent(item[0]),
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
};
URLSearchParams
,可以对查询字符串进行操作。
let qs = "?name=xkc&age=20";
let searchParams = new URLSearchParams(qs);
console.log(searchParams); // URLSearchParams { 'name' => 'xkc', 'age' => '20' }
let hasName = searchParams.has("name");
console.log(hasName); // true
let name = searchParams.get("name");
console.log(name); // xkc
searchParams.set("hobby", "LOL");
console.log(searchParams.toString()); // name=xkc&age=20&hobby=LOL
searchParams.delete("hobby");
console.log(searchParams.toString()); // name=xkc&age=20
// 遍历
for (let param of searchParams) {
console.log(param);
}
/*
[ 'name', 'xkc' ]
[ 'age', '20' ]
*/
操作地址
修改浏览器地址可以通过,location.assign()
,传入 URL 为参数。
location.assign("https://www.baidu.com");
同样也有另外两种改变地址的方式:
window.location = "https://www.baidu.com";
location.href = "https://www.baidu.com";
这几种方法都会在浏览器历史记录中增加对应记录,因此可以通过浏览器的"前进"和"后退"。而另一种方式则是替换地址。
location.replace("https://www.baidu.com");
reload()
,能够重新加载当前显示的页面。
location.reload(); // 重新加载,可能是从缓存中加载
location.reload(true); // 重新加载,从服务器中加载