push stat e与监听浏览器返回解决的问题
1.实际开发我们在A页面调用组件，在组件里面填好内容之后，发现想退出 不想 填了，因为组件与A页面此时在同一页面，点击返回时候 给人感觉是返回上上个页面，但之前A页面填写的东西 都没有了，这很影响体验。
因此可以使用pushstate方法，不刷新浏览器 改变 url 当你再返回时候就会返回到这个A页面而不是上上个页面。但此时还需要监听返回的按钮，进而控制组件的显示与隐藏。这点也至关 重要 。不然组件不隐藏，也就相当于没效果。
pushState
使用方法 （一 般情况）
function pushHistory() {
VAR state = { t IT le: "title", url: " # " };
window.history.pushState(state, "title", "#"); }
参数说明：
pushState() 带有三个参数：state是js对象，title是个标题（现在被忽略了），以及一个可选的 url地址 。
关于pushstate的说明
浏览器不会向服务端请求数据，直接改变url地址，可以类似的理解为变相版的hash；但不像hash一样，浏览器会记录pushState的 历史记录 ，可以使用浏览器的前进、后退功能作用。
监听浏览器返回按钮
window.addEventListener("popstate", function(e) { console. LOG (e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);
转自： https://segmentfault测试数据/a/1190000022696823
到此这篇关于ht ML 5的pushstate以及监听浏览器返回事件的实现的 文章 就介绍到这了,更多相关html5的pushstate实现内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 html5的pushstate以及监听浏览器返回事件的实现 全部内容，希望文章能够帮你解决 html5的pushstate以及监听浏览器返回事件的实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5的pushstate以及监听浏览器返回事件的实现的详细内容...