摘要：所有属性两个属性，一个方法只读返回一个布尔值，显示当前页面是否不可见。可能的值页面内容至少是部分可见。在实际中，这意味着页面是非最小化窗口的前景选项卡。注释浏览器支持是可选的页面状态切换时的事件。参考资料张鑫旭博客页面可见性介绍微拓展
今天在知乎上看到一篇文章，说到了用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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82879.html
摘要：原文译文的页面可视性译者在早期，浏览器并没有提供选项卡，但是现在基本所有浏览器都提供了这个功能。在这个中，将基于页面的可视性状态弹出文档的标题。对于常见的手风情效果，当页面不可见时，可以限制其移动。 原文：HTML5 Page Visibility API 译文：HTML 5的页面可视性API 译者：dwqs showImg(https://segmentfault.com/im...
一、简介 要知道用户何时离开，有常用的方法是监听下面三个事件。 pagehide beforeunload unload 可上述三种方法有一个bug就是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。 用户点击了一条系统通知，切换到另一个 App。 用户进入任务切换窗口，切换到另一个 App。 用户点击了 Home 按钮，切换...
阅读 1317·2023-04-25 23:42
阅读 2639·2021-11-19 09:40
阅读 3496·2021-10-19 11:44
阅读 3493·2021-10-14 09:42
阅读 1838·2021-10-13 09:39
阅读 3775·2021-09-22 15:43
阅读 609·2019-08-30 15:54
阅读 1432·2019-08-26 13:32
