Android , iOS 均有提供页面可见/不可见的回调方法,通常在其中订阅和取消订阅. 本文将说明如何在H5中监听页面可见状态.

转载原文

一、简介

背景:

一般我们在进行前端页面开发时,对于用户正在离开页面.常用的方法是监听下面三个事件.

  • pagehide
  • beforeunload
  • unload

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

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

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

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

意义：

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

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

官方有个在线的例子大伙可以看一下：http://daniemon.com/tech/webapps/page-visibility/

二、document.visibilityState

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

  • hidden：页面彻底不可见。
  • visible：页面至少一部分可见。
  • prerender：页面即将或正在渲染，处于不可见状态。
  • unloaded : 页面正在从内存中卸载。 注释：浏览器支持是可选的。

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

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

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

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

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

注意，document.visibilityState属性只针对顶层窗口，内嵌的