杂谈:HTML 5页面可视性API_html/css_WEB-ITnose
原文:HTML5 Page Visibility API
译文:HTML 5的页面可视性API
译者:dwqs
在早期,浏览器并没有提供选项卡,但是现在基本所有浏览器都提供了这个功能。作为一个程序员,我一般会同时打开10到15个选项卡,甚至有些时候会在25到30.
为什么介绍Page Visibility API呢?
之前,是不可能确定哪个选项卡是激活的,哪个没有激活,但是在HTML 5 Visibility API的帮助下,就可以检测用户是否在浏览某个网站的页面。
在这篇文章中,我们将会理解如何使用HTML 5 Visibility API,并且用一个小demo去发觉页面的状态。在这个demo中,将基于页面的可视性状态弹出文档的标题。
检查页面的可见性
为了使用Visibility API,我们要先了解两个新的文档属性,第一个是document.visibilityState,另一个是document.hidden.它们的功能是不同的。
document.visibilityState有四个不同的值:
1、hidden:页面在任何屏幕上不可见
2、prerender:页面在加载,对用户不可见
3、visible:页面可见
4、unloaded:页面卸载(即用户将离开当前页面)
document.hidden是一个布尔值,false表示页面可见,true表示页面不可见。
既然知道了可用的属性,就是时候去监听事件了,这样子就可以知道页面的可见性是什么状态。这是
利用visibilitychange事件完成的,示例如下:
document.addEventListener('visibilitychange', function(event) { if (!document.hidden) { // The page is visible. } else { // The page is hidden. }});
这段代码是visibilitychange事件的一个简单应用?检测当前页面的状态。但是你必须知道的是所有属性和方法都必须带前缀,因为他们在一些浏览器中是带私有前缀的。下面则是一个跨浏览器的案例:
// Get Browser-Specifc Prefixfunction getBrowserPrefix() { // Check for the unprefixed property. if ('hidden' in document) { return null; } // All the possible prefixes. var browserPrefixes = ['moz', 'ms', 'o', 'webkit']; for (var i = 0; i
现在有了所有浏览器带前缀的属性和方法,就可以放心应用了。对之前的代码做出调整:
// Get Browser Prefixvar prefix = getBrowserPrefix();var hidden = hiddenProperty(prefix);var visibilityState = visibilityState(prefix);var visibilityEvent = visibilityEvent(prefix); document.addEventListener(visibilityEvent, function(event) { if (!document[hidden]) { // The page is visible. } else { // The page is hidden. }});哪些地方需要用到Visibility API呢?
在下列情况中,就可以考虑使用API了:
1、你在浏览一个导航页面,并且这个页面正在从一个RSS源查询细节,或者定期调用API,如果页面对用户不可见的话,
我们可以限制对RSS源或者API的调用。
2、对于常见的手风情效果,当页面不可见时,可以限制其移动。
3、同样的方式,只有页面不可见的时候,才显示 HTML Notification(译文:http://www.ido321.com/1130.html)给用户。
我们已经知道代码怎么去调用Visibility API了,接下来就看一个Demo吧。
Demo
Demo1:利用Visibility API改变页面标题: View Demo
Demo2:当页面不可见时,怎么从限制查询从服务器传送的数据。
在Demo2中,对于来自服务器的刷新信息,我们将怎么限制查询?不仅是用户正在浏览页面,并且假设页面已经引入
了JQuery。为了简单,仅仅以计数说明,但是可以用真实的服务器数据代替。
HTML:
0
JavaScript:
View Demo
浏览器支持
如果想知道浏览器是否支持Visibility API,我建议去Can I use?去查询。但是建议用编程的方式去检测浏览器是否支持,可以参考Detect Support for Various HTML5 Features(译文:
http://www.ido321.com/1116.html)。在主流的现代浏览器中已经对这个API有了很好的支持
总结
我说过,有一个包含两个属性和一个事件的很不错的API给我们使用。它可以很容易的整合到你已经存在的应用中,并可以带来很好的用户体验。最后想说的是,当页面对用户不可见的时候,我们就可以控制页面的行为了。
下一篇:杂谈:HTML 5的消息通知机制
推荐阅读
-
杂谈:HTML 5页面可视性API_html/css_WEB-ITnose
-
HTML5与CSS3基础教程:标记页面主要区域_html/css_WEB-ITnose
-
HTML5与CSS3基础教程:标记页面主要区域_html/css_WEB-ITnose
-
实战经验:快速构建H5单页面切换骨架_html/css_WEB-ITnose
-
学习 HTML5-页面结构(1)_html/css_WEB-ITnose
-
学习 HTML5-页面结构(1)_html/css_WEB-ITnose
-
html5 页面滚动_html/css_WEB-ITnose
-
实战经验:快速构建H5单页面切换骨架_html/css_WEB-ITnose
-
html5 页面滚动_html/css_WEB-ITnose
-
优化数据页面(5)--加大字号突出标题行_html/css_WEB-ITnose