需求背景:因为业务需要从H5页面跳转到小程序页面,再从小程序页面返回到H5时,H5页面也要刷新
目前在这个问题时有很多思路,大概如下:
1.document.hidden判断页面是否可以见(此方法在Chrome浏览器下能够准备的打印出页面的显示与隐藏,但是在小程序环境中嵌入的H5页面没有任何打印)
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
// 添加监听器
document.addEventListener(visibilityChange, function() {
console.log("当前页面是否被隐藏:" + document[hidden]);
}, false);
2.根据页面生命周期判断是否需要刷新页面(这个方法在真机测试时会出现页面一直刷新,不符合预期)
// 根据页面是否有缓存,判断页面是否需要刷新
window.onpageshow = function(event) {
if (event.persisted || window.performance && window.performance.navigation.type == 2) {
window.location.reload();
}
}
//根据页面的显示和隐藏,判断是否需要刷新
var isPagesHide;
window.addEventListener('pageshow', function() {
if(isPagesHide) {
window.location.reload();
}
})
window.addEventListener('pagehide', function() {
isPagesHide = true;
})
3,.根据路由变化,判断是否需要刷新页面(好用)
//在小程序跳回H5页面时添加参数reloadPage,通过新旧路由中参数的有无,判断页面是否需要刷新
window.onhashchange = function (e) {
if(e.newURL.indexOf('reloadPage') > -1) {
// todo
}
}