pageshow的persisted总为false解决方案以及返回页面刷新

2,556 阅读1分钟

之前在项目中使用pageshow,发现页面返回的时候persisted依然为false,这时候只好找其他方案解决。 这时候发现有一个window.performance对象,performance.navigation.type是一个无符号短整型

  • TYPE_NAVIGATE (0):

    当前页面是通过点击链接,书签和表单提交,或者脚本操作,或者在url中直接输入地址,type值为0

  • TYPE_RELOAD (1)

    点击刷新页面按钮或者通过Location.reload()方法显示的页面,type值为1

  • TYPE_BACK_FORWARD (2)

    页面通过历史记录和前进后退访问时。type值为2 TYPE_RESERVED (255) 任何其他方式,type值为255

这真是我们需要的部分,于是可以预见,解决方案如下:

window.addEventListener('pageshow', () => {
  if (e.persisted || (window.performance && 
    window.performance.navigation.type == 2)) {
    location.reload()
  }
}, false);

引用:stackoverflow.com/questions/1…

返回页面刷新

// 解决 Android 返回不刷新
export function androidBackRefresh() {
    window.history.replaceState(null, '', window.location.href + '&t=' + new Date().getTime());
}



// 方法2
 window.addEventListener('pageshow', async (event) => {

            if (event.persisted || window.performance && window.performance['navigation']['type'] == 2) {
                alert(event.persisted || window.performance && window.performance['navigation']['type']);
                const { data, logid, msg } = await this.props.backRefresh({
                    t: new Date().getTime()
                });
                
                this.setState({
                   ...
                });
            }
        }, false);
        

JS监听手机物理返回键(及IOS微信端的bug)