怎么在HTML中通过Page Visibility API检测页面是否处于前台状态-html教程-PHP中文网

document.visibilitystate === 'visible' 不等于页面在前台，它仅反映浏览器渲染策略而非用户真实焦点；应监听 document 上的 visibilitychange 事件并校验初始状态，ios safari 中需结合 hasfocus() 和 pagehide 事件兜底。

怎么在html中通过page visibility api检测页面是否处于前台状态

document.visibilityState === 'visible' 不等于页面在前台

直接读取 document.visibilityState 判断是否“在前台”是常见误操作。它返回 'visible' 时，页面可能正被 iOS Safari 锁在前台（比如 App 切后台但音频仍在播放），也可能只是 Chrome 预渲染未完成的假可见状态；而返回 'hidden' 时，用户可能根本没切走——只是标签页闲置被 Chrome 冻结了。

这个值只反映浏览器对“是否该渲染/执行 JS”的策略判断，不是用户物理焦点的真实快照。真正可靠的入口只有一个：visibilitychange 事件，且必须配合初始状态校验。

必须监听 visibilitychange 事件，且不能漏掉首次触发

事件只在 document 上触发，不冒泡、不委托，绑定错对象就完全失效。常见错误包括：

脚本放在顶部且无 defer，DOM 还没加载完就注册监听 → 漏掉页面初始从 prerender 或 hidden 切到 visible 的第一次变化
监听写成 window.addEventListener('visibilitychange', ...) → 无效，事件根本不在 window 上
在 iframe 子页面里试图监听父页面状态 → 子页面的 document 和父页面无关

正确做法是确保 DOM 加载完成后执行，例如：

document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      // 页面变为可见：恢复动画、重连心跳、续播视频
    } else if (document.visibilityState === 'hidden') {
      // 页面不可见：暂停计时器、停掉轮询、静音音频
    }
  });
});