Page Visibility API

Web 开发中一个常见的问题是开发者不知道用户什么时候真正在使用页面。如果页面被最小化或隐藏在其他标签页后面，那么轮询服务器或更新动画等功能可能就没有必要了。Page Visibility API 旨在为开发者提供页面对用户是否可见的信息。

这个 API 本身非常简单，由 3 部分构成。

• document.visibilityState 值，表示下面 4 种状态之一。

  • 页面在后台标签页或浏览器中最小化了。
  • 页面在前台标签页中。
  • 实际页面隐藏了，但对页面的预览是可见的(例如在 Windows 7 上，用户鼠标移到任务栏图标上会显示网页预览)。
  • 页面在屏外预渲染。

• visibilitychange 事件，该事件会在文档从隐藏变可见(或反之)时触发。

• document.hidden 布尔值，表示页面是否隐藏。这可能意味着页面在后台标签页或浏览器中被最小化了。这个值是为了向后兼容才继续被浏览器支持的，应该优先使用 document.visibilityState 检测页面可见性。

要想在页面从可见变为隐藏或从隐藏变为可见时得到通知，需要监听 visibilitychange 事件。document.visibilityState 的值是以下三个字符串之一: "hidden"、"visible" 和 "prerender"。

示例

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'visible') {
    // 页面变为可见时的处理逻辑
    console.log('页面变为可见');
  } else {
    // 页面变为不可见时的处理逻辑
    console.log('页面变为不可见');
  }
});