Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等
以前监听用户正在离开页面常用的方法是下面三个事件:
1、pagehide 2、beforeunload 3、unload
但这些事件在手机上不触发,因为手机系统可以将进程直接转入后台,然后杀死,为了解决这个问题,就诞生了 Page Visibility API 不管手机或桌面电脑,所有情况下,这个 API 都会监听到页面的可见性发生变化 这个 API 常用于页面被切换到其他后台进程时,自动暂停音乐或视频的播放,达到节省资源,减缓电能消耗等效果
这个 API 主要在 document 对象上,新增了一个 document.visibilityState 属性,该属性返回一个字符串,表示页面当前的可见性状态,共有三个可能的值:
1、hidden:页面彻底不可见 2、visible:页面至少一部分可见 3、prerender:页面即将或正在渲染,处于不可见状态
hidden 状态和 visible 状态是所有浏览器都支持的 只要页面可见,哪怕只露出一个角,document.visibilityState 属性就返回 visible,只有以下四种情况,才会返回 hidden:
1、浏览器最小化 2、浏览器没有最小化,但是当前页面切换成了背景页 3、浏览器将要卸载(unload)页面 4、操作系统触发锁屏屏幕
prerender 状态只在支持"预渲染"的浏览器上才会出现,比如 Chrome,可以在用户不可见的状态下,预先把页面渲染出来,等到用户要浏览的时候,直接展示渲染好的网页
可以看到,上面四种场景涵盖了页面可能被卸载的所有情况 也就是说,页面卸载之前,document.visibilityState 属性一定会变成 hidden
只要 document.visibilityState 属性发生变化,就会触发 visibilitychange 事件 因此,可以通过监听这个事件跟踪页面可见性的变化,举个例子:
document.addEventListener('visibilitychange', function () {
// 用户离开了当前页面
if (document.visibilityState === 'hidden') {
document.title = '页面不可见';
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
document.title = '页面可见';
}
});
上面代码是 Page Visibility API 的最基本用法,可以监听可见性变化 下面是另一个例子,一旦页面不可见,就暂停视频播放:
var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);
function startStopVideo() {
if (document.visibilityState === 'hidden') {
vidElem.pause();
} else if (document.visibilityState === 'visible') {
vidElem.play();
}
}