javascript：visibilitychange事件：监听页面可见性

页面可见性是什么？

页面可见性api的作用是通过监听document的visibilitychange事件记录当前标签页在浏览器中的激活状态。所谓“激活状态”指当前标签是否正在被用户浏览。

简单的说，就是 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

用它有什么好处？

我们可以利用这个api在特定的时候避免执行一些不必要的操作，页面不可见时，暂停播放流媒体文件、停止一些不必要的轮询，以减少客户端、服务端压力，对于节省资源和提高性能特别有用。

有哪些使用场景？

1、当前页面不可见时，暂停播放视频或者音乐，当页面恢复可见，继续之前播放。

2、实时轮询的榜单页面，当页面不可见时，暂停轮询。

3、网页轮播图，只有在用户观看轮播时，才自动切换到下一张。

4、在客户端内，一个文章列表页，点击文章打开新的webview或者客户端页面浏览或评论，返回上一页时，列表中该文章数据更新。

5、点击支付跳转到新开页面，再返回这个页面时弹出支付状态相关提示弹窗。

浏览器兼容性

既然这么有用，肯定要看一下兼容性，能否用在项目中，下图是截止2019年10月30日的兼容性图表，也可点击 can i use 网站查看兼容性。

移动端可以放心大胆地使用。

该API的属性和事件

属性

1、document.hidden

布尔值，表示标签页的显示或隐藏。

2、document.visibilityState

相对详细一些，目前有四个可能的值：

• visible：页面部分内容可见。意味着该标签页是一个非最小化的可见标签页，可能被别的页面覆盖了一部分。

• hidden：页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。

• prerender：页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。

• unloaded：页面正在从内存中卸载。 注释：浏览器支持是可选的。

注意：prerender和unloaded在chrome中测试不出来触发场景，个人猜测并没有支持这两个值。MDN网站只有中文版有介绍这两个属性值，英文版只有prerender，且不建议使用。点击进入MDN

事件

visibilitychange：当浏览器可见性发生变化的时候，这个事件会被触发。

我们可以在document对象上注册一个监听visibilitychange事件，根据document.hidden或者document.visibilityState属性做一些业务逻辑。

注意：visibilitychange是document的事件，路由之间的跳转，不会改变当前页面的可见性，页面之间的跳转更不会触发该事件。

示例场景

客户端内嵌H5页面经常遇到的一个场景：H5页面有一个视频，正在播放时，点击页面其他按钮，进入客户端原生页面，或者打开一个新的webview，这时视频应该暂停播放，返回该页面时，视频继续播放。

这种情况实现方法不止一个，我们这里使用这次的主角visibilitychange来实现。

1、先封装一下visibilitychange事件

tools.js代码：

varvar handleShow, handleHide,handleRemove, state_name;
/**
 * 监听visibilitychange
 * @param  {object} options 可见与不可见的回调函数
 * 
 */
export function onBrowserChange(options) {
  handleShow = options.handleShow,
  handleHide = options.handleHide;
  if (document.visibilityState || document.webkitVisibilityState) {
    var prefix = document.visibilityState && '' || document.webkitVisibilityState && 'webkit' || '';
    var event_name = prefix + 'visibilitychange';
    state_name = prefix ? prefix + 'VisibilityState' : 'visibilityState';
    document.addEventListener(event_name, BrowserChangeEvent);
  }
}
/**
 * 具体的事件处理函数 
 * removeEventListener()不能移除匿名函数，我们把函数单独提出来
 * @param  无
 * 
 */
function BrowserChangeEvent() {
  var state = document[state_name];
  if (state === 'visible' && typeof handleShow === 'function') {
    handleShow();
  } else if (state === 'hidden' && typeof handleHide === 'function') {
    handleHide();
  }
}
/**
 * 移除监听visibilitychange事件
 * @param  {object} options 移除前的回调函数
 * 
 */
export function removeBrowserChange(options) {
  handleRemove = options.handleRemove;
  if (document.visibilityState || document.webkitVisibilityState) {
    var prefix = document.visibilityState && '' || document.webkitVisibilityState && 'webkit' || '';
    var event_name = prefix + 'visibilitychange';
    state_name = prefix ? prefix + 'VisibilityState' : 'visibilityState';
    if (document[state_name] === 'visible' && typeof handleRemove === 'function') {
      handleRemove();
    }
    document.removeEventListener(event_name, BrowserChangeEvent, false);
    handleShow = null;
    handleHide = null;
    handleRemove =null;
  }
}

<