移动端监听物理返回键
起因:项目需求 移动端H5页面点击返回键,弹出广告弹屏,关闭广告弹屏后,ios端禁止点击返回键,Android端再次点击返回键返回上一界面
监听物理返回键参考文章.
监听物理返回键
//页面加载时 调用pushHistory() 添加一条状态
pushHistory();
window.addEventListener("popstate", function(e) {
//监听返回键后的操作
if(!popupFlag && popupData){
showModalWx(popupData); //展示弹框
}
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
Android微信浏览器
在测试过程中发现,Android端在点击返回键后,弹框会闪现(因为页面被重新渲染 ,初始状态弹框是隐藏的)
而在ios端点击返回键后 页面返回地址会与当前地址进行对比,若一致页面不会重新渲染。
所以在代码中加入了环境判断。
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var isFirst = sessionStorage.getItem("popupData");
$(function(){
/* ios默认展示前进后退底部菜单栏 */
if((isAndroid && !isFirst) || isiOS || sessionStorage.getItem("popupAndroid")=="goPage"){
pushHistory();
}
//获取配置信息
initModalWx();
});
var data;
var popupFlag = false;
var popupData = null;
window.addEventListener("popstate", function(e) {
if(!popupFlag && popupData && !isAndroid){
//判断有数据 不是Android端时执行展示弹框
showModalWx(popupData);
}else if(isAndroid){
if(sessionStorage.getItem("popupAndroid")=="goPage"){
showModalWx(popupData);
}
sessionStorage.setItem("popupAndroid",'this');
}
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
//Android端 返回之后会重新渲染页面,执行 弹框展示
if(sessionStorage.getItem("popupAndroid")=="this" && sessionStorage.getItem("popupData")){
popupData = JSON.parse(sessionStorage.getItem("popupData"))
sessionStorage.removeItem("popupAndroid")
showModalWx(popupData);
}