近来最先挪动端页面的时刻,被window.location和window.history坑了一把,因而决议对这两个对象举行一个周全的理会。下面举行我们的正文…
location
起首引见的是location对象,location是BOM对象中最经常运用的一个对象之一,它供应了与当前窗口中加载的文档的有关的信息,还供应了一些导航的功用。说到这里,实在location是一个异常的迥殊的对象,由于window.location===document.location.别的location对剖析URL异常的有协助,下面看一下location的属性表。
以此例子:http://www.google.com:8080/lo… (注:随意打的)
属性名 | 例子 | 申明 |
---|---|---|
hash | “#type” | 设置或返回URL中的#背面的hash值,假如没有则为”” |
host | “www.google.com:8080” | 设置或返回URL中的主机称号和端口号 |
hostName | “www.google.com” | 设置或返回URL中的主机称号 |
href | “http://www.google.com:8080/loanOrder/detail?orderId=1236#type” | 设置或返回完全的URL |
pathname | “/loanOrder/detail” | 设置或返回当前 URL 的途径部份 |
port | “8080” | 设置或返回URL中的端口号,假如URL中没有端口号,则为”” |
protocol | “http:” | 设置或返回当前 URL 的协定,通常是http:或https: |
search | “?orderId=1236” | 返回URL的查询字符串。这个字符串以”?”开首 |
<center>location属性表</center>
接下来我们说说,基于location对象我们经常运用的一些操纵。
1.查询字符串参数
function getArgsQuery() {
//获得查询字符串并去掉"?"
var searchStr=window.location.search.length>0?window.location.search.substring(1):"";
//将每一项集成到数组中
var searchStrArray=searchStr.length>0?searchStr.split("&"):[];
//存储末了返回的对象
var args={};
searchStrArray.forEach(function (item) {
//属性
var name=decodeURIComponent(item.split("=")[0]);
//值
var value=decodeURIComponent(item.split("=")[1]);
args[name]=value;
});
return args;
}
2.转变游览器的位置
1) window.location.reload() //重新加载页面
在挪用reload()不传任何参数时,页面自上次要求以来并没有转变过,页面就会从游览器缓存中加载,假如传入参数true时,页面会强迫从服务器重新加载。
例:
window.location.reload() //重新加载(有能够从缓存中加载)
window.location.reload(true) //重新加载(从服务器重新加载)
2) window.location.assign(url); //加载新的文档
与 window.location.assign(url)结果一样的另有
- window.location.href=url;
- window.location=url;
3) window.location.replace(url); //用新文档替换当前文档
一样是加载新文档,区分就是window.location.assign(url)是能够重新文档再回到当前文档,然则window.location.replace(url)就不行了,用来完成过渡页面时异常好用,然则有些webview倒是不支持的,比方小编在开辟的钉钉上的微运用的时刻就碰到这个,这时候我们该如何做呢?下面就是我们讲到的history对象。
history
History 对象最初设想来示意窗口的阅读汗青。但出于隐私方面的缘由,History 对象不再许可剧本接见已接见过的现实 URL。唯一坚持运用的功用只要 back()、forward() 和 go() 要领。这三个也异常简朴,我就随意写几个例子,意义一下。
例子:
window.history.go(-2); //退却两页
window.history.go(-1); //退却一页
window.history.go(1); //行进一页
window.history.go(2); //行进两页
window.history.back();//退却一页
window.history.forward();//行进一页
这里要说一下的是window.history.go(),我在查阅材料的时刻发明window.history.go()是能够传一个字符串参数的,此时的游览器会跳转到汗青记录中包括该字符串的第一个位置(能够行进能够退却)。小编一最先倒是也不晓得这个,就本身试了一下,然则页面就革新了一下,并没有匹配到页面,小编试了好频频,也换了好几个游览器也没有胜利,假如其他小伙们胜利,还望留言示知。
上面三个方面置信很多人都晓得,然则小编要引见的是下面这两个要领:window.history.pushState()和 window.history.replaceState().
1) window.history.pushState(stateObject,title,url )
将当前URL和history.state加入到history中,并用新的state和URL替换当前,不会形成页面革新。
--参数诠释
stateObject //与要跳转到的URL对应的状况信息,没有特别的情况下能够直接传{}
title //如今大多数阅读器不支持或许疏忽这个参数,我们在用的时刻发起传一个空字符串
url //这个参数供应了新汗青纪录的地点,它不肯定如果相对地点,也能够是相对的,不可跨域
2) window.history.replaceState(stateObject,title,url)
用新的state和URL替换当前,不会形成页面革新。
--参数诠释
stateObject //与要跳转到的URL对应的状况信息,没有特别的情况下能够直接传{}
title //如今大多数阅读器不支持或许疏忽这个参数,我们在用的时刻发起传一个空字符串
url //这个参数供应了新汗青纪录的地点,它不肯定如果相对地点,也能够是相对的,不可跨域
有些小伙伴们看到这里能够对stateObject这个参数不太清晰,下面我们举个例子来体味这个stateObject是怎样回事。说到这个,我先说一下popstate事宜,这个事宜是干吗的,或许怎样才能触发的,官方给我们的答案是:
popstate每次运动汗青记录条目在统一文档的两个汗青记录条目之间转变时,将事宜分派到窗口。
能够很多人跟我一样,看到这个诠释的时刻一脸懵逼的,那我们就简朴的,哪些要领能够触发这个popstate事宜。下面翻开这个链接https://www.lagou.com/gongsi/…(这个是拉勾网上我的公司主页链接,顺路帮助打个广告),在控制台我们实行下面这段代码看看。
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
window.history.pushState({name:"阿里巴巴"}, "", "347.html");
window.history.pushState({name: "支付宝"}, "", "164268.html");
window.history.replaceState({name: "华为"}, "", "j87078.html");
window.history.back(); // alert "location: https://www.lagou.com/gongsi/347.html, state: {"name":"阿里巴巴"}"
console.log(window.history.state);//{name:"阿里巴巴"}
window.history.back(); // alert "location: https://www.lagou.com/gongsi/35166.html, state: null
console.log(window.history.state);//null
window.history.go(2); // alert "location: https://www.lagou.com/gongsi/j87078.html, state: {"name":"华为"}
console.log(window.history.state);//{name:"华为"}
置信实行这段代码以后,你就更好理解了,没什么是实行一次代码不能解决的,假如有那就多实行频频。
回到前面我抛出的题目,怎样替换window.location.replace()要领,能够不少小伙们已晓得了,不晓得的小伙们,我就贴一下例子:
/*
能够另有其他的要领,假如有迎接留言交换
这里我照旧拿https://www.lagou.com/gongsi/j35166.html举例
翻开控制台,输入下面这段代码。
*/
history.replaceState({name: "华为"}, "", "j87078.html");
window.location.reload();
/*
实行完以后,我们发明不能回退了,是否是就跟window.location.replace()完成一样的结果了。
*/
结语: 没什么是实行一次代码不能解决的,假如有那就多实行频频。