location,BOM 最常用的对象之一,提供了当前窗口加载的文档信息和一些导航功能。
location,一个特殊的对象,它既是 window 对象的属性,也是 document 对象的属性,换句话说 document.location 和 window.location 引用的是同一个对象
location的常用属性
- hast:返回URL中 #号后面跟着的0个或多个字符,没有则返回空字符串
- host:返回服务器名称和端口号(如果有端口号)
- hostname:返回服务器名称
- href:返回完整的 URL 地址,location 对象的 toString() 方法也返回这个值
- pathname:返回 URL 目录或文件名称
- port:返回端口号,没有则返回空字符串
- protocal:返回服务器协议,通常是 http 和 https
- search:返回 URL 中 ?号开头的查询字符串
在控制台打印出 location 可以看到如下信息:location 等同于 window.locaion
获取URL查询字符串
虽然 location 的 search 可以获取到 URL 包含的查询字符串,但是并不能逐个取得每项的查询字符串,下面我们封装一个小方法,以便我们获取所有参数的一个对象
function getSearch(urlStr){
//把传入的字符串去掉?号开头和解析成数组
let qa = urlStr.substring(1).split("&");
//保存数据的对象
let objQa = {};
for(let i=0; i < qa.length; i++){
let item = qa[i].split("=");
//定义2个接受值的变量
let name,num;
name = item[0];
num = item[1];
objQa[name] = num;
}
return objQa;
}
getSearch(location.search)
//{rapidView: "257", projectKey: "MAP", view: "planning", selectedIssue: "MAP-680"}
修改URL
location,中有很多修改方式修改浏览器的 URL。
- location.assign("https://www.baidu.com")
- location = "https://www.baidu.com" /window.location 同等
- location.href = "https://www.baidu.com"
另外,修改location的其他属性,也可以改变当前加载页面的URL(除hash外)
location.search = "?js=javascript"
......
上面说到的每一种方式在修改 URL 之后,都会在浏览器历史记录中留下痕迹,用户可以点击后退按钮,回退到前一个页面
location.replace() ,该方法接收一个要跳转到URL参数,用该方法修改的URL,不会在浏览器的历史记录存在,因此用户也无法回到前一个页面
location.reload(),重新加载页面,从缓存加载
location.reload(true),重新加载页面,从服务器加载