微信端监听‘返回’事件
下面的方法是在移动端实现的,在微信的浏览器中beforeunload等是被阉割掉的,所以用不了。
而下面的方法存在的问题是:当前页面通过点击事件进入下级页面后,再返回到当前页会直接触发popstate事件,也就意味着会直接弹出confirm,并且当你点击‘确认’的时候,需要点击多次才能返回。出现这两个问题的原因是:
1、popstate事件不可被移除,当你从子页面返回的时候,popstate会被触发(ios并不会刷页面),并且执行
2、子页面返回会往history栈中添加一条历史记录,所以在返回的时候不会跳转回去,并且因为当前页面重写了pushState,所以会出现停留在当前页
因此,这边进行的处理就是在页面加载后直接进行window.location.back();同时,对事件的执行进行延迟
// 判断点击左上角返回
$(document).ready(function (e) {
// 最好写在页面加载请求的接口中
if(window.location.hash === '#hash'){
window.history.back();
}
pushHistory();
let bool = false;
setTimeout(function () {
bool = true;
}, 1500);
window.addEventListener('popstate', function (e) {
if(bool) {
var cfi = confirm("确定要离开当前页面嘛?");
if(cfi) {
window.history.back();
}else{
document.write("You pressed cancel!")
}
}
}, false);
function pushHistory () {
let state = {
title: 'title',
url: '#'
};
window.history.pushState(state, 'title', '#');
}
});
附上,popstate是h5新出的api,还有用于监听hash的api叫hashchange,就是监听跟在#符号后面的URL部分,包括#符号变化,但是hashchange不管是back,还是forward都会触发。
网友评论