监听页面可见的visibilitychange和viewDidAppear

有这样场景:
  1. 一个浏览器打开多个tab页,当前页被浏览或切换到其他页就会触发visibilitychange事件。
  2. app中打开一个H5,H5跳到帖子页,或者从帖子页跳回到H5就会visibilitychange事件。
  3. 当设备进入待机模式时,网站想要关闭设备声音,可以使用visibilitychange事件。
    主要涉及到了当前的页面是否正在被用户浏览。

需求,app中的H5跳转到了app的其他操作页,在其他的操作页修改了数据,所以回到h5页面的时候需要重新请求数据,那么就用到了这个函数。

const hiddenProperty = 'hidden' in document ? 'hidden'
: 'webkitHidden' in document ? 'webkitHidden'
: 'mozHidden' in document ? 'mozHidden' : null;
const visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

//利用VisibilityChange 事件判断页面可见性

document.addEventListener(visibilityChangeEvent, onVisibilityChange);

onVisibilityChange(){
  const hiddenProperty = 'hidden' in document ? 'hidden'
  : 'webkitHidden' in document ? 'webkitHidden'
  : 'mozHidden' in document ? 'mozHidden' : null;
  if (!document[hiddenProperty]) {
    this.refreshData=new Date().getTime();
  }
},

// 如果refreshData变化 重新请求数据,达到数据更新的效果

viewDidAppear同样可以解决以上问题

 window.viewDidAppear = ()=> {
         //重新请求数据
 };

viewDidAppear在视图实际可见时调用,并且可以在视图控制器的生命周期中多次调用(例如,当关闭模态视图控制器并且视图再次变得可见时)

你可能感兴趣的:(监听页面可见的visibilitychange和viewDidAppear)