popstate_图解用HTML5的popstate如何玩转浏览器历史记录

一、popstate用来做什么的？

简而言之就是HTML5新增的用来控制浏览器历史记录的api。

二、过去如何操纵浏览器历史记录？

window.history对象，该对象上包含有length和state的两个值，在它的__proto__上继承有back、forward、go等几个功能函数

在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。

例如：

history.back(); (后退一步，使用history.go(-1)也可实现后退效果)

弊端：只能操作前进后退，但是无法控制前进后要去哪，history.length都只会维持原来的状态

三、popstate的怎么用？

HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

pushState、replaceState两者用法差不多。

使用方法：

history.pushState(data,title,url);

//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；

replaceState用法类似，例如：history.replaceState("首页","",location.href+ "#news");

两者区别：pushState会改变history.length，而replaceState不改变history.length

通过下图我们可以对比看出pushState和replaceState的差别(注意看history.length的变化)：

图解用HTML5的popstate如何玩转浏览器历史记录

新闻

音乐

varlocationHref=location.href;

document.addEventListener("click",function(event) {vartarget=event.target;if(target.className== "js-news") {

history.pushState("首页","", locationHref+ "#news");

}else if(target.className== "js-music") {

history.pushState("音乐","", locationHref+ "#music");

}

});/*document.addEventListener("click",function(event){

var target = event.target;

if(target.className == "js-news"){

history.replaceState("首页","",locationHref + "#news");

}else if(target.className == "js-music"){

history.replaceState("音乐","",locationHref + "#music");

}

});*/window.addEventListener("popstate",function() {

console.log(history.state);

})

popstate_图解用HTML5的popstate如何玩转浏览器历史记录相关推荐

HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录
一.popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api. 二.过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和sta ...
html5 保存搜索历史,html5 – 如何有效处理Dart中的浏览器历史记录(即后退按钮)？...
HTML5定义了用于操作历史记录的新API,允许您在不重新加载窗口的情况下更改位置.有一篇关于Dive Into HTML5的精彩文章,展示了如何使用历史API在单页面应用中模拟多页面导航.它很容易翻 ...
HTML5的popstate、pushState、replaceState记录(Vue-Router实现)
HTML5的popstate.pushState.replaceState记录 popstate 示例 hashchange history.pushState() 语法参数描述示例 histo ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
小恐龙游戏python_补一波之前说好的用DQN自动玩Chrome浏览器的小恐龙游戏呗~
原文链接补一波之前说好的用DQN自动玩Chrome浏览器的小恐龙游戏呗~mp.weixin.qq.com 效果展示在cmd窗口运行如下命令即可: 模型训练: python TRexRush.py ...
popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
吃粽子html5游戏,端午先玩个小游戏，再去吃粽子吧～
原标题:端午先玩个小游戏,再去吃粽子吧- 这个端午节,你过的怎么样? 来和米妹玩个小游戏吧截屏下方动图如果截到的画面正好是大湖雪糯请将截图私信给米妹哟- 我们将在选出3名幸运儿,送上我们精美的礼 ...
popstate_操纵浏览器历史记录--popstate() history.pushState()
一.历史记录前进与后退 1.后退: window.history.back()--相当于用户在浏览器的工具栏上点击返回按钮: 2.前进: window.history.forward()--相当于用户 ...
html5 3d模型资源,玩转 HTML5 下 WebGL 的 3D 模型交并补
CSG 构造实体几何这个概念在工业水利水电施工上.游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体.圆柱体.棱柱.棱锥.球体.圆锥等.根据每个软件包的不同这些体元也有 ...

popstate_图解用HTML5的popstate如何玩转浏览器历史记录

popstate_图解用HTML5的popstate如何玩转浏览器历史记录相关推荐

最新文章

热门文章