判断标签页显示隐藏（visibilitychange事件）

Posted 2021-01-10 zshno1

 

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

这个事件可以满足一些用户需求，比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。

这个事件已经得到现代浏览器广泛的支持，不过一些老版本的浏览器需要加相应的前缀。

 

Chrome (Webkit)	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
13前缀webkit 33无需前缀	10前缀moz 18无需前缀	10前缀ms	12.10	最新的测试已经支持

注：Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

document的可见性属性

Page Visibility (Second Edition)中定义了2个只读的document属性：hidden和visibilityState。

其中document.hidden是一个布尔值，简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细，目前有四个可能的值：

• visible : 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。
• hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。
• prerender : 网页内容被预渲染并且用户不可见。
• unloaded : 如果文档被卸载，那么这个值将被返回。

一般情况下我们使用document.hidden就能满足通常的需求。

document.addEventListevent(‘vibisilitychange‘,function(){
     document.title = document.hidden ? ‘你快回来，我一个个人承受不来‘ ：‘我在呢‘   
});