1. iOS (iPhone和iPad)的点击闪屏问题
原因:在ios上,当点击一个链接或者通过js绑定了点击事件的元素时,会出现一个半透明的背景,当手指离开屏幕,该灰色背景消失,出现“闪屏”;
解决方法:
方法一:将半透明的遮罩层改为全透明(验证可行)
html, body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
方法二:将click改为tap绑定点击事件(未验证)
2. ios上使用history.go(-1)时不会重新加载页面,Android会重新加载
原因:iOS在微信和支付宝扫码页面上浏览器回退是不重新加载页面的,有些时候是需要重新加载的,就出现了问题。
解决方法:
方法一:监听回退事件
$(function(){
pushHistory();
});
// 函数定义
function pushHistory(){
window.addEventListener("popstate", function(e){
alert("回退!");
//window.history.back();
//在历史记录中后退,这就像用户点击浏览器的后退按钮一样。
//window.history.go(-1);
//你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。
//self.location=document.referrer;
//可以获取前一页面的URL地址的方法,并返回上一页。
}, false);
var state = {
title:"",
url: "#"
};
window.history.pushState(state, "", "#");
}
方法二:pageShow事件中通过e.persisted判断页面是否来自BF Cache,是则重新加载。
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
if (e.persisted) {
location.reload();
}
});