这里了将介绍一下 页面可见性(PageVisibility)API的简单应用。
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的可见性属性
中定义了2个只读的document
属性:hidden
和visibilityState。
其中document.hidden
是一个布尔值,简单的表示标签页显示或者隐藏。而document.visibilityState
属性更为详细,目前有四个可能的值:
visible
: 页面内容至少部分可见。这意味着在实际情况中,该网页是一个非最小化窗口的可见标签页。hidden
: 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。prerender
: 网页内容被预渲染并且用户不可见。unloaded
: 如果文档被卸载,那么这个值将被返回。
一般情况下我们使用document.hidden
就能满足通常的需求。
为了支持老版本的浏览器,我们需要对document.hidden
在做一些前缀处理:
function getHiddenProp(){ var prefixes = ['webkit','moz','ms','o']; // if 'hidden' is natively supported just return it if ('hidden' in document) return 'hidden'; // otherwise loop over all the known prefixes until we find one for (var i = 0; i < prefixes.length; i++){ if ((prefixes[i] + 'Hidden') in document) return prefixes[i] + 'Hidden'; } // otherwise it's not supported return null; }
同样的,我们可以获取document.visibilityState
属性:
function getVisibilityState() { var prefixes = ['webkit', 'moz', 'ms', 'o']; if ('visibilityState' in document) return 'visibilityState'; for (var i = 0; i < prefixes.length; i++) { if ((prefixes[i] + 'VisibilityState') in document) return prefixes[i] + 'VisibilityState'; } // otherwise it's not supported return null; }
这样我们可以写一个跨浏览器的函数,检查文档是否可见。
function isHidden() { var prop = getHiddenProp(); if (!prop) return false; return document[prop]; }
visibilitychange监听事件
你可以在document对象上注册一个监听visibilitychange
事件,根据document.hidden
或者document.visibilityState
属性做一些业务逻辑:
// use the property name to generate the prefixed event name var visProp = getHiddenProp(); if (visProp) { var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange'; document.addEventListener(evtname, function () { document.title = document[getVisibilityState()]+"状态"; },false); }
上面的代码会在页面可见性发生变化时修改document.title
的值。
demo:https://www.7psus5.com/demo/visibilitychange-event/
这样多简单,replace(/hidden/i, ‘visibilitychange’)