Page Visibility API 教程

一、简介

有时候,开发者需要知道,用户正在离开页面。常用的方法是监听下面三个事件。

  • pagehide
  • beforeunload
  • unload

但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。

  • 用户点击了一条系统通知,切换到另一个 App。
  • 用户进入任务切换窗口,切换到另一个 App。
  • 用户点击了 Home 按钮,切换回主屏幕。
  • 操作系统自动切换到另一个 App(比如,收到一个电话)。

上面这些情况,都会导致手机将浏览器进程切换到后台,然后为了节省资源,可能就会杀死浏览器进程。

以前,页面被系统切换,以及系统清除浏览器进程,是无法监听到的。开发者想要指定,任何一种页面卸载情况下都会执行的代码,也是无法做到的。为了解决这个问题,就诞生了 Page Visibility API。不管手机或桌面电脑,所有情况下,这个 API 都会监听到页面的可见性发生变化。

这个新的 API 的意义在于,通过监听网页的可见性,可以预判网页的卸载,还可以用来节省资源,减缓电能的消耗。比如,一旦用户不看网页,下面这些网页行为都是可以暂停的。

  • 对服务器的轮询
  • 网页动画
  • 正在播放的音频或视频

二、document.visibilityState

这个 API 主要在document对象上,新增了一个document.visibilityState属性。该属性返回一个字符串,表示页面当前的可见性状态,共有三个可能的值。

  • hidden:页面彻底不可见。
  • visible:页面至少一部分可见。
  • prerender:页面即将或正在渲染,处于不可见状态。

其中,hidden状态和visible状态是所有浏览器都必须支持的。prerender状态只在支持"预渲染"的浏览器上才会出现,比如 Chrome 浏览器就有预渲染功能,可以在用户不可见的状态下,预先把页面渲染出来,等到用户要浏览的时候,直接展示渲染好的网页。

只要页面可见,哪怕只露出一个角,document.visibilityState属性就返回visible。只有以下四种情况,才会返回hidden

  • 浏览器最小化。
  • 浏览器没有最小化,但是当前页面切换成了背景页。
  • 浏览器将要卸载(unload)页面。
  • 操作系统触发锁屏屏幕。

可以看到,上面四种场景涵盖了页面可能被卸载的所有情况。也就是说,页面卸载之前,document.visibilityState属性一定会变成hidden。事实上,这也是设计这个 API 的主要目的。

另外,早期版本的 API,这个属性还有第四个值unloaded,表示页面即将卸载,现在已经被废弃了。

注意,document.visibilityState属性只针对顶层窗口,内嵌的<iframe>页面的document.visibilityState属性由顶层窗口决定。使用 CSS 属性隐藏<iframe>页面(比如display: none;),并不会影响内嵌页面的可见性。

三、document.hidden

由于历史原因,这个 API 还定义了document.hidden属性。该属性只读,返回一个布尔值,表示当前页面是否可见。

document.visibilityState属性返回visible时,document.hidden属性返回false;其他情况下,都返回true

该属性只是出于历史原因而保留的,只要有可能,都应该使用document.visibilityState属性,而不是使用这个属性。

四、visibilitychange 事件

只要document.visibilityState属性发生变化,就会触发visibilitychange事件。因此,可以通过监听这个事件(通过document.addEventListener()方法或document.onvisibilitychange属性),跟踪页面可见性的变化。

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();
  }
}

五、页面卸载

下面专门讨论一下,如何正确监听页面卸载。

页面卸载可以分成三种情况。

  • 页面可见时,用户关闭 Tab 页或浏览器窗口。
  • 页面可见时,用户在当前窗口前往另一个页面。
  • 页面不可见时,用户或系统关闭浏览器窗口。

这三种情况,都会触发visibilitychange事件。前两种情况,该事件在用户离开页面时触发;最后一种情况,该事件在页面从可见状态变为不可见状态时触发。

由此可见,visibilitychange事件比pagehidebeforeunloadunload事件更可靠,所有情况下都会触发(从visible变为hidden)。因此,可以只监听这个事件,运行页面卸载时需要运行的代码,不用监听后面那三个事件。

甚至可以这样说,unload事件在任何情况下都不必监听,beforeunload事件只有一种适用场景,就是用户修改了表单,没有提交就离开当前页面。另一方面,指定了这两个事件的监听函数,浏览器就不会缓存当前页面。

六、参考链接

  • Page Visibility Level 2, W3C
  • Page Visibility API, David Walsh
  • Using the pageVisbility API, Joe Marini
  • Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 2, Jatinder Mann
  • Don't lose user and app state, use Page Visibility, Ilya Grigorik

(完)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

2227
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

教你轻松修改React Native端口

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。 当我们运行一个React Na...

4044
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

4068
来自专栏Golang语言社区

glang文件读写

go文件的相关操作函数在os包下,可以查看os包官方文档来学习。 创建文件并写入内容 创建文件和写入需要用到两个函数: func Create(name st...

3157
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

2609
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

7152
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

4388
来自专栏Java成神之路

计算机_01_常用快捷键

         Windows+L   : 锁(look)    屏               

943
来自专栏DeveWork

WordPress 中变量$allowedposttags 添加自定义HTML属性

在使用Options Framework 的时候,发现如果输入的textarea 如果是HTML 代码,一些标签的属性会被过滤(比如说date-*)属性。查看了...

2085
来自专栏前端菜鸟变老鸟

表格按列方向上渲染数据

如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。

814

扫码关注云+社区

领取腾讯云代金券