html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现 -凯发k8官方网

这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现，主要介绍了pushstate的使用，以及监听浏览器的解决等问题，感兴趣的可以一起来了解一下

pushstate与监听浏览器返回解决的问题

1.实际开发我们在a页面调用组件，在组件里面填好内容之后，发现想退出不想填了，因为组件与a页面此时在同一页面，点击返回时候 给人感觉是返回上上个页面，但之前a页面填写的东西 都没有了，这很影响体验。

因此可以使用pushstate方法，不刷新浏览器改变url 当你再返回时候就会返回到这个a页面而不是上上个页面。但此时还需要监听返回的按钮，进而控制组件的显示与隐藏。这点也至关重要。不然组件不隐藏，也就相当于没效果。

pushstate

使用方法(一般情况)

function pushhistory() {

var state = { title: "title", url: "#" };

window.history.pushstate(state, "title", "#"); }

参数说明：

pushstate() 带有三个参数：state是js对象，title是个标题(现在被忽略了)，以及一个可选的url地址。

关于pushstate的说明

浏览器不会向服务端请求数据，直接改变url地址，可以类似的理解为变相版的hash；但不像hash一样，浏览器会记录pushstate的历史记录，可以使用浏览器的前进、后退功能作用。

监听浏览器返回按钮

1window.addeventlistener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);

转自：https://segmentfault.com/a/1190000022696823

到此这篇关于html5的pushstate以及监听浏览器返回事件的实现的文章就介绍到这了,更多相关html5的pushstate实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：脚本之家

链接：https://www.jb51.net/html5/726535.html

申请创业报道，分享创业好点子。，共同探讨创业新机遇！

总结

以上是凯发k8官方网为你收集整理的html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。