监听浏览器返回操作
监听浏览器返回操作
一、总结
一句话总结:
注意先要pushState一个地址,不然就监听不到
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } pushHistory(); window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);
1、popstate事件 是什么?
当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。
浏览器的前进和后退都会触发这个popstate事件,所以能起到一个监听页面变化的作用。
2、History.pushState()怎么使用?
pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。
window.history.pushState(state, "title", "#xx");
3、禁止返回上一页的一种方案?
利用pushState向浏览历史列表中插入当前页面,在点击后退前和点击时都插入一次,那样无论点前进还是后退永远都会留在这个页面了
history.pushState(null, null, document.URL); window.addEventListener("popstate",function(e) { console.log(e); history.pushState(null, null, document.URL); }, false);
二、利用popstate事件和window下的history对象处理浏览器跳转问题
转自或参考:利用popstate事件和window下的history对象处理浏览器跳转问题
https://www.cnblogs.com/wancheng7/p/8542544.html
popstate事件
当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。
就我目前的认识来看,无论是浏览器的前进还是后退都会触发这个popstate事件,所以只能起到一个监听页面变化的作用。
History 接口
- 属性
- History.length 表示历史会话中元素的数目
- History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。
- History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。
- 方法
-
History.back()
等同于history.go(-1)
-
History.forward()
等同于historygo(1)
-
History.go()
这个方法中如果参数超出范围或者不对就不会起效果
-
History.pushState()
pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。下面将对这三个参数进行细致的检查
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); }
其他方法就不一一列举了,感兴趣的看文档
监听浏览器返回按钮
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } pushHistory(); window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);
这个地方就监听了浏览器的返回事件,如果不先pushState一个地址就监听不到,直接跳转了
-
-
禁止返回上一页的一种方案
history.pushState(null, null, document.URL); window.addEventListener("popstate",function(e) { console.log(e); history.pushState(null, null, document.URL); }, false);
这个其实就是利用pushState向浏览历史列表中插入当前页面,在点击后退前和点击时都插入一次,那样无论点前进还是后退永远都会留在这个页面了
如果大家还有什么关于利用history接口和popstate结合控制页面跳转的实际应用案例,欢迎留言讨论交流!