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

最新推荐文章于 2024-07-29 13:53:58 发布

娜娜的小幸福

最新推荐文章于 2024-07-29 13:53:58 发布

阅读量3.2k

点赞数 1

分类专栏：微信小程序文章标签： javascript html5 小程序

本文链接：https://blog.csdn.net/nn1523713/article/details/112945089

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求背景：因为业务需要从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
        }
    }