javascript页面可见性API是什么_如何检测页面是否被隐藏？-js教程-PHP中文网

javascript页面可见性API是什么_如何检测页面是否被隐藏？

紅蓮之龍

发布： 2025-12-15 20:16:02

原创

499人浏览过

JavaScript页面可见性API用于检测页面是否对用户可见，通过document.visibilityState、document.hidden和visibilitychange事件实现，可优化资源消耗、暂停视频、停止轮询等，现代浏览器广泛支持。

javascript页面可见性api是什么_如何检测页面是否被隐藏？

JavaScript 页面可见性 API 是浏览器提供的一套接口，用来判断当前页面是否对用户可见（比如在前台标签页中显示），还是被隐藏（比如切换到其他标签页、最小化窗口、锁屏等）。它不依赖定时器或焦点事件，而是直接反映页面的真实可见状态，特别适合优化资源消耗，比如暂停视频、停止轮询、节省电量。

核心属性和事件

可见性 API 主要通过 document.visibilityState 和 document.hidden 两个属性，配合 visibilitychange 事件使用：

document.visibilityState：返回字符串，常见值有 "visible"（页面可见）、"hidden"（页面不可见）、"prerender"（预渲染，较少见）
document.hidden：布尔值，true 表示页面隐藏，false 表示可见（兼容旧版，但推荐优先用 visibilityState）
visibilitychange 事件：当页面可见性发生变化时触发，比如用户切走又切回标签页

基础检测写法

监听 visibilitychange 事件是最常用方式，可以实时响应状态变化：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('页面变为可见，可恢复动画/轮询/音频');
  } else {
    console.log('页面被隐藏，建议暂停非必要操作');
  }
});

登录后复制

注意：该事件不会在页面首次加载时触发，只在后续状态变化时发生。如需初始化逻辑，应单独检查一次 document.visibilityState。

立即学习“Java免费学习笔记（深入）”；