探索HTML5页面可见性API

（图片来源网络，侵删）

简介

HTML5页面可见性API是一组用于检测网页是否对用户可见的方法和事件，这些方法可以帮助我们了解用户是否正在查看我们的网站，从而优化性能、节省资源或执行特定操作。

API 方法

document.visibilityState

document.visibilityState 是一个只读属性，返回当前文档的可见性状态，可能的值包括：

"visible" 页面完全可见且处于激活状态（前台）。

"hidden" 页面完全不可见（背景）。

"prerender" 页面正在预渲染。

"unloaded" 页面已卸载。

document.visibilityChange

document.visibilityChange 是一个事件，当文档的可见性状态发生变化时触发，我们可以监听此事件以在可见性状态更改时执行操作。

document.addEventListener("visibilitychange", function() { if (document.visibilityState === "hidden") { console.log("页面不可见"); } else { console.log("页面可见"); } });

示例代码

以下是一个简单的示例，展示了如何使用可见性API来检测页面何时变为可见或隐藏。

<!DOCTYPE html> <html> <head> <meta charset="UTF8"> <title>页面可见性示例</title> </head> <body> <h1>页面可见性示例</h1> <p>请尝试切换到其他标签页或最小化窗口，然后返回。</p> <script> document.addEventListener("visibilitychange", function() { if (document.visibilityState === "hidden") { console.log("页面不可见"); } else { console.log("页面可见"); } }); </script> </body> </html>

单元表格

方法/属性描述 document.visibilityState 返回当前文档的可见性状态 "visible" 页面完全可见且处于激活状态 "hidden" 页面完全不可见 "prerender" 页面正在预渲染 "unloaded" 页面已卸载 document.visibilityChange 当文档的可见性状态发生变化时触发的事件

上文归纳

HTML5页面可见性API为我们提供了一种检测页面是否对用户可见的方法，通过使用这些方法和事件，我们可以更好地了解用户的行为并优化我们的网站性能。