html页面可见性监测

html页面可见性监测处理

项目开发中会有这样的需求，当前页面最小化，或被其它应用挡住，或者tab切换时，为了更好的用户体验（特别是游戏场景），页面的性能考虑，需要做相关处理。

Page Visibility API

阮一峰教程，这篇文章写的很详细，可以参考。
demo

focus blur

利用focus和blur来模拟页面的隐藏和显示，虽说不够严谨，但是有些简单的需求还是可以应付的。
demo

项目应用

一个app的h5项目，需求：进入首页浏览内容，当点击下一步按钮时，如果发现当前状态是未登录，则跳转至app的登陆页面，登陆后再切回到首页。这里使用了页面可见性，当从app的登陆页回到h5的首页时，利用可见性事件完成一系列动作。

document.addEventListener('visibilitychange', (evt) => {
  if (document.visibilityState === 'visible') {
    if(this.isFromLogin) { // 从h5页面跳转到app的登陆页面之前，把它设置成true，回到这个页面时知道要去操作哪个功能
      location.reload();
    }
  }
}, false)