译文来源：http://www.ido321.com/1126.html
原文：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的消息通知机制