⼤家知道在页⾯中我们可以使⽤javascript window history,后退到前⾯页⾯,但是由于安全原因javascript不允许修改history
⾥已有的url链接,但可以使⽤pushState⽅法往history⾥增加url链接,并且提供popstate事件监测从history栈⾥弹出url。既然
有提供popstate事件监测,那么我们就可以进⾏监听。
返回、后退、上⼀页按钮点击监听实现代码:
window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能 }, false);
虽然我们监听到了后退事件,但是页⾯还是会返回上⼀个页⾯,所以我们需要使⽤pushState增加⼀个本页的url,代表本页,⼤
家都⾮常清楚是#
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }
当进⼊该页⾯,我们就给这个history压⼊⼀个本地的连接。当点击返回、后退及上⼀页的操作时,就进⾏监听,在监听代码中
实现⾃⼰操作。
下⾯是完整的代码:
$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能 }, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); } });