Re:从零开始的实习生活04----盘点window对象中location和history
来源:互联网 发布:爱玩图淘宝u站9.9 编辑:程序博客网 时间:2024/06/06 02:34
最近开始移动端页面的时候,被window.location和window.history坑了一把,于是决定对这两个对象进行一个全面的剖析。下面进行我们的正文…
location
首先介绍的是location对象,location是BOM对象中最常用的一个对象之一,它提供了与当前窗口中加载的文档的有关的信息,还提供了一些导航的功能。说到这里,其实location是一个非常的特别的对象,因为window.location===document.location.另外location对解析URL非常的有帮助,下面看一下location的属性表。
以此例子:http://www.google.com:8080/loanOrder/detail?orderId=1236#type (注:随便打的)
接下来我们说说,基于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/j35166.html(这个是拉勾网上我的公司主页链接,顺道帮忙打个广告),在控制台我们执行下面这段代码看看。
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: nullconsole.log(window.history.state);//nullwindow.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()实现同样的效果了。*/
结语: 没什么是执行一次代码不能解决的,如果有那就多执行几次。
- Re:从零开始的实习生活04----盘点window对象中location和history
- Re:从零开始的实习生活06----Jquery中attr()和prop()的区别
- Re从零开始的实习生活01——jQuery中attr()和prop()的区别
- Re:从零开始的实习生活----序篇
- Window、Document、Location、History对象的常用属性和方法
- Re:从零开始的实习生活03----Datatables的使用说明
- Re:从零开始的实习生活02----webstorm导入node工程
- Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件
- RE:从零开始的数据结构生活
- location对象和history对象
- history对象和location对象
- window对象中的location、screen、navigator、history
- 浏览器对象(Window、History、Location、Navigator、Screen)
- javascript中的window的location和history学习总结
- Re:从零开始的实习生活05----vue调试神器vue-devtools安装
- Re:从零开始的实习生活07----JS正则表达式,看这篇就够了
- window.history, window.location
- JavaScript浏览器对象、window对象、计时器、history对象、location对象
- 设计模式学习--建造者模式
- php 以三维数组里的某个字段(字段是二维的)为键重新组合。
- Java自然语言处理NLP工具包
- Android Orientation Sensor(方向传感器)详解与应用
- MapReduce和HDFS
- Re:从零开始的实习生活04----盘点window对象中location和history
- java程序打包jre以及制作安装包
- 防火墙常用范例
- FP Tree算法原理总结
- Mac OS平台下应用程序安装包制作工具Packages的使用介绍
- Android之光线传感器
- 浅谈JavaScript垃圾收集——标记清除和引用计数
- Python批量爬取第三方库(安装)(二进制.whl文件)
- 小学生算术(进位问题)