如何判断用户是否退出页面

相信判断用户退出页面是一种常见的业务,但是有时候可能出现不常见的意外.

• pagehide
• beforeunload
• unload

Page Visibility API

这个api可以帮助我们判断到页面是否关闭，也可以帮助用户解决“页面加载过程中”的事情。这是HTML5新提供的一个api，作用是记录当前标签页在浏览器中的激活状态。 所谓“激活状态”指当前标签是否正在被用户浏览,页面可见性API对于节省资源和提到性能特别有用，它使页面在文档不可见时避免执行不必要的任务。

document.visibilityState

document.visibilityState返回的是文档的可见性,它包含以下的值:

• “hidden”：页面对用户是不可见的
• “visible”：页面内容少部分是可见的
• “pagerender”：页面正在渲染中
• “unloaded” : 页面正在从内存中卸载。

var string = document.visibilityState

同时提供了一个visibilitychange的监听事件:从文档当前从可见变成不可见或者从不可见变为可见都会触发这个函数:

document.addEventListener('visibilitychange', function () {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    document.title = '页面不可见';
  }

  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});

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

document.hidden

该api只读,返回的是一个布尔值,表示当前的页面是否可见.

var string = document.hidden

tip:但是不建议使用这个属性,应该都使用visibilitychange事件

以下情况的是hidden:

• 浏览器最小化
• 浏览器没有最小化,而是从当前页面跳转到其它页面
• 浏览器卸载了页面
• 系统锁屏

使用场景

• 节约音频流量
• 资源的懒加载