网页切到后台恢复后刷新数据

前端技术发表留言

使用场景

商品促销的时候，购买完成后需要恢复原价（就是刷新页面），但是支付不是当前页面完成的，是跳转到了App的收银台进行的操作，等收银结束后返回到商品页面，页面没有刷新，所以还是显示的以前的价格；

我们要做的就是收银台关闭之后要重新请求一下接口完后，完成数据的更新；

问题分析

尝试监听过pageshow事件，但是pageshow事件是在页面切走之后（一般是解决跳转之后页面返回的问题），再切回来才会触发，所以不适合该场景；

//解决ios回退不刷新页面问题
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isIOS){
    window.onpageshow = function (e) {
          // e.persisted 如果是返回到这个页面的这个值是true
        if(e.persisted || (window.performance && window.performance.navigation.type == 2)){
            // fetchData();
        }
    }
}

可以将App的收银台理解为一个新的浏览器标签，实际上页面并没有跳转，只是被弹出的页面遮罩了，就想我们在浏览器上切换到其他的标签的操作类似的，所以我们就要监听页面的可见性来处理刷新的问题；

解决方案

在我们跳转收银台之前现在本地存储一个值，这里使用了sessionStorage，当然也可以使用全局变量；

sessionStorage.setItem('refresh', 'true');

然后在全局监听页面可见性变更事件，等到页面再次展示的时候，我们刷新页面即可；

window.document.addEventListener('visibilitychange', function (e) {
  if (document.visibilityState === 'visible') {
    if (sessionStorage.getItem('refresh') === 'true') {
      sessionStorage.removeItem('refresh');
      // fetchData();
    }
  }
});

参考

留下回复