森泥.酷哦

加油,小可耐!

Page Visibility API

H5 0 评 105 度

在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下。

document.visibilityState

主要有以下3个状态:

  • hidden:页面彻底不可见。
  • visible:页面至少一部分可见。
  • prerender:页面即将或正在渲染,处于不可见状态。

hidden状态和visible状态是所有浏览器都支持的。prerender状态仅支持预渲染的浏览器

注意:The Page Visibility API defines a means to programmatically determine the visibility state of a top level browsing context, and to be notified if the visibility state changes(就是说document.visibilityState属性只针对顶层窗口)

只要页面可见,哪怕页面只展示一点document.visibilityState属性就返回visible。以下四种情况会返回hidden

  • 浏览器最小化。
  • 浏览器没有最小化,但是当前页面切换成了背景页(相当于被别的页面覆盖)。
  • 浏览器将要卸载(unload)页面。
  • 操作系统触发锁屏屏幕。
页面卸载和不可见都会触发visibilitychange事件

document.hidden

如果document.visibilityState = visible 那么document.hidden=false

注意document.hidden 是历史遗留,如果可能尽量使用document.visibilityState

visibilitychange 事件

document.onvisibilitychangedocument.addEventListener()

实例页面隐藏暂停播放,显示继续播放

function handleVisibilityChange() {
  if (document.visibilityState == "hidden") {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange, false);

参考资料:

Page Visibility Level 2

Page Visibility API 教程

Page Lifecycle API

单例模式