判断标签页显示隐藏(visibilitychange事件)
Posted zshno1
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了判断标签页显示隐藏(visibilitychange事件)相关的知识,希望对你有一定的参考价值。
简单的说,浏览器标签页被隐藏或显示的时候会触发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 ? ‘你快回来,我一个个人承受不来‘ :‘我在呢‘ });
以上是关于判断标签页显示隐藏(visibilitychange事件)的主要内容,如果未能解决你的问题,请参考以下文章