如何使用 JavaScript 实现页面可见性 (Page Visibility API) 监听？

推荐答案

// www.javascriptcn.com code example
function handleVisibilityChange() {
  if (document.hidden) {
    console.log("页面不可见了");
    // 执行页面不可见时的操作，如暂停动画、停止轮询等
  } else {
    console.log("页面可见了");
    // 执行页面可见时的操作，如恢复动画、重新开始轮询等
  }
}

// 添加事件监听器
document.addEventListener("visibilitychange", handleVisibilityChange);


// 或者，你也可以使用 window.onvisibilitychange
// window.onvisibilitychange = handleVisibilityChange;

本题详细解读

什么是 Page Visibility API？

Page Visibility API 允许你检测页面是否对用户可见。这对于以下场景非常有用：

• 节约资源： 当页面不可见时，可以暂停动画、视频播放、轮询请求等，从而节省 CPU 和电量。
• 提供更好的用户体验： 当页面重新可见时，可以恢复之前暂停的操作。
• 数据分析： 了解用户在何时与你的页面互动。

如何使用 Page Visibility API？

Page Visibility API 主要使用以下属性和事件：

• document.hidden (只读属性):
  • 如果页面是隐藏的（例如，用户切换到了另一个标签页或最小化了浏览器窗口），则返回 true。
  • 如果页面是可见的，则返回 false。
• document.visibilityState (只读属性):
  • 返回当前页面的可见性状态，值为：
    • visible: 页面可见
    • hidden: 页面不可见
    • prerender: 页面正在预渲染，不可见
    • unloaded: 页面正在被卸载
• visibilitychange 事件:
  • 当页面的可见性状态发生改变时，会触发此事件。你需要监听此事件来响应页面可见性的变化。

示例代码详解

1. handleVisibilityChange 函数:

   • 这是一个回调函数，当 visibilitychange 事件触发时会被调用。
   • 它首先检查 document.hidden 的值。
   • 如果 document.hidden 为 true，表示页面不可见，打印 "页面不可见了" 并可以执行相应的操作（例如，暂停动画）。
   • 如果 document.hidden 为 false，表示页面可见，打印 "页面可见了" 并可以执行相应的操作（例如，恢复动画）。

2. document.addEventListener("visibilitychange", handleVisibilityChange):

   • 这行代码在 document 对象上添加了一个 visibilitychange 事件监听器。
   • 当页面的可见性发生改变时，handleVisibilityChange 函数会被自动调用。

3. window.onvisibilitychange = handleVisibilityChange;:

   • 这行代码使用window.onvisibilitychange属性进行事件监听，和 document.addEventListener 效果相同，二者选其一即可。

兼容性

Page Visibility API 在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。对于较旧的浏览器，可能需要使用 polyfill 来提供兼容性支持。