微信APP实现点击返回按钮不刷新页面

该问题出现在 iphone7的微信上,当一个活动存在多个页面,那么如果进入第二个页面时,再点击微信 app上的返回按钮,虽然可以返回 history中的上一级页面,但是会出现页面内容没有刷新还是最后跳转时的状态。

解决方案很简单,那就是每进入到一个页面,都会去判断这个页面是否是从缓存中读取的,如果是则强刷页面。
实现这个功能,我们可以利用 window.onpageshow 事件的 pageTransitionEvent 对象来判断当前页面是否从缓存中读取。

具体代码:


persisted 是 pageTransitionEvent对象中的一个属性,它的返回值是一个布尔值,用于表示页面是否从缓存中读取。 关于 onpageshow事件的兼容性,可以看下图




var isIphone = /iPhone/.test(navigator.userAgent);
if(isIphone){
    window.onpageshow=function(event){
        if(event.persisted){
            location.reload(true);
        }
    }
}




pageshow 事件对应的还有一个 pagehide事件,它们与我们常见的 onload, onunload 事件有很大的相同之处,都是页面打开时就会触发,但是不同的是,pageshow、pagehide则在页面被打开或者是关闭时触发,而 onload 则是等待页面资源加载好后才会触发,并且一旦页面是从缓存中读取时就不会触发 onload事件。

发布时间2018/7/20 11:00:16

访问量232 次

网友评论

发表评论

欢迎评论哦!