从H5页面跳转到小程序页面，再从小程序页面返回到H5时，H5页面不刷新

最新推荐文章于 2025-10-17 17:46:53 发布

原创

最新推荐文章于 2025-10-17 17:46:53 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #小程序

需求背景：因为业务需要从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.根据页面生命周期判断是否需要刷新页面(这个方法在真机测试时会出现页面一直刷新，不符合预期)