什么是 Page Visibility ？
Page Visibility 即页面可见性，通过 visibilityState 的值检测页面当前是否可见。当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态，当用户最小化网页或者浏览到其他标签的网页时，API将发送一个关于当前页面的可见信息的事件vibilitychange。你可以检测该事件然后执行一些活动或是展示不同的效果。这个API在节约资源上是非常有用的，当网页不可见时，这个API通过提供给开发者可以操作不必须的任务的接口。比如，如果你的网站正在播放一个视频，也许当用户浏览其他浏览器时它可以暂停，那么当用户切换回来的时候，就可以继续播放了。用户可以继续观看，不会因为浏览其他的浏览器导致丢失当前视频的进度。
页面可见性（Page Visibility）API可以有哪些用途？
- 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
- 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
- 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
- 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）
- 可应用于视频站点。当用户进入页面播放，离开页面暂停。
- 可应用于登录同步。
- 可用于计算在线时长。
- 在线聊天离开状态。
- 还有一些切换效果，比方说，每次用户切换到你这个页面上的时候，logo抖一下，或页面一道亮光闪过，或者欢迎语之类。
如何使用？
Page Visibility API的规范很简单，只有两个属性：
document.hidden 根据浏览器窗口的状态返回布尔值 true 或 false。
document.visibilityState存储具体的状态字符串。一共有四种状态：
visible: 页面内容至少是部分可见，非最小化窗口的前景选项卡。hidden: 页面内容对用户不可见，可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。prerender: 页面内容正在被预渲染且没有对用户是不可见的unloaded: 页面正在从内存中卸载。
下面写一个计算在线时长的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0 : run</title>
</head>
<style>
</style>
<body>
<h1>你在页面停留的时间为 <span id="time">0</span> s</h1>
<h1>这是你第 <span id="count">0</span> 次离开又回来了。</h1>
<script>
var i = 0,
count = 0,
si = setInterval(function () {
document.querySelector(‘#time‘).innerHTML = ++i;
document.title = i + ‘ : run‘;
}, 1000);
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
clearInterval(si);
document.title = i + ‘ : pause‘;
} else {
document.querySelector(‘#count‘).innerHTML = ++count;
si = setInterval(function () {
document.querySelector(‘#time‘).innerHTML = ++i;
document.title = i + ‘ : run‘;
}, 1000);
}
});
</script>
</body>
</html>
上例代码大意是：当页面可见时，计时停留的时间，当页面不可见时，计时器停止，页面标题与之同步（切换标签页时注意标题）。再次返回页面，继续计时并且显示当前离开又回来的次数。
本文只是个引子，简单介绍基础使用，更为复杂的应用和效果大家自行实现。
时间： 2024-08-03 16:35:59