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

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值