有趣的API：Page Visibility API 页面可见性

今天在知乎上看到一篇文章，说到了用window.blur 和 window.focus事件来动态改变网页的title, Page Visibility这么强大的功能只能怀才不遇

Page Visibility API

在使用浏览器的时，用户常常是打开多个网页，当一个网页是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态。Page Visibility做的事情很简单，就是判断页面是否课件。

Page Visibility 所有属性

两个属性，一个方法

document.hidden(只读)
返回一个布尔值，显示当前页面是否不可见。

document.visibilityState (只读)
是一个用来展示文档可见性状态的字符串。可能的值：

• visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。

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

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

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

visibilitychange 页面状态切换时的事件。

和focus、blur事件的一些区别。

• focus、blur会在点击地址栏，书签时触发。Visibility不会触发
  

• 多窗口模式下，Visibility不会触发。
  

• 页面直接最小化，focus、blur和Visibility正常触发。
  

牢记定义： 文档是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。

应用场景

• 使用 Visibility可以节省资源，当页面不可见的时候，就可以让页面休息休息了，一些动画也可以暂停，或者播放的视频暂停，非常贴心。

• 或者一个打开一个站点多个页面，在其中一个页面登录，切换到其它页面的时候就可以自动登录。

兼容性

经过了几年的发展，现在Page Visibility API 的兼容性已经非常良好，可以放心使用。

参考资料

张鑫旭博客Page Visibility(页面可见性) API介绍、微拓展

MDN Page_Visibility_API