Page Visibility API

目录

简介

通常,我们使用各种事件,判断用户是否正在离开当前页面。

  • visibilityState
  • pageshow
  • pagehide
  • beforeunload
  • unload

但是,手机浏览器往往不会触发这些事件,原因是浏览器进程会被突然关闭或者切换到后台,从而没有机会触发这些事件。常见的场景有以下这些。

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

上面这些情况,都会导致浏览器进程切换到后台,也很可能会被操作系统自动终止,以便回收资源。 这使得pagehidebeforeunloadunload等事件根本不会触发。

这种情况下面,我们就要使用 Page Visibility API,判断页面是否可见。它可以保证会在手机浏览器得到执行。

// 页面的 visibility 属性可能返回三种状态
// prerender,visible 和 hidden
let pageVisibility = document.visibilityState;

// 监听 visibility change 事件
document.addEventListener('visibilitychange', function() {
  // 页面变为不可见时触发
  if (document.visibilityState == 'hidden') { ... }

  // 页面变为可见时触发
  if (document.visibilityState == 'visible') { ... }
});

其他的用途还包括根据用户行为调整程序。比如,在轮询的情况下,如果页面处于当前窗口,可以每隔15秒向服务器请求数据;如果不处于当前窗口,则每隔几分钟请求一次数据。

实际开发中,为了防止某些浏览器不支持这个 API,最好同时监听pagehide事件,这样会比较保险。

属性

这个 API 部署在document对象上,提供以下两个属性。

  • document.hidden:返回一个布尔值,表示当前是否被隐藏。
  • document.visibilityState:表示页面当前的状态,可以取三个值。
    • visibile:页面可见
    • hidden:页面不可见
    • prerender:页面即将或正在渲染,不可见

VisibilityChange 事件

页面的可见状态发生变化时,会触发VisibilityChange事件。

document.addEventListener('visibilitychange', function () {
  console.log(document.visibilityState);
});

参考链接

留言

comments powered by Disqus