杂谈：HTML 5页面可视性API

译文来源：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 < browserPrefixes.length; i++) {    var prefix = browserPrefixes[i] + 'Hidden';    if (prefix in document) {      return browserPrefixes[i];    }  }   // The API is not supported in browser.  return null;} // Get Browser Specific Hidden Propertyfunction hiddenProperty(prefix) {  if (prefix) {    return prefix + 'Hidden';  } else {    return 'hidden';  }} // Get Browser Specific Visibility Statefunction visibilityState(prefix) {  if (prefix) {    return prefix + 'VisibilityState';  } else {    return 'visibilityState';  }} // Get Browser Specific Eventfunction visibilityEvent(prefix) {  if (prefix) {    return prefix + 'visibilitychange';  } else {    return 'visibilitychange';  }}

现在有了所有浏览器带前缀的属性和方法，就可以放心应用了。对之前的代码做出调整：

// 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呢？

Demo

HTML：

<!-- This element will show updated count --><h1 id="valueContainer">0</h1>

javaScript：

<script type="text/Javascript">         // Get Browser Prefix    var prefix = getBrowserPrefix();    var hidden = hiddenProperty(prefix);    var visibilityState = visibilityState(prefix);    var visibilityEvent = visibilityEvent(prefix);         var timer = null;         function increaseVal() {        var newVal = parseInt($('#valueContainer').text()) + parseInt(1);        $('#valueContainer').text(newVal);        document.title = newVal + ': Running';                 timer = setTimeout(function() {            increaseVal();        }, 1);    }         // Visibility Change    document.addEventListener(visibilityEvent, function(event) {          if (document[hidden]) {              clearTimeout(timer);              var val = parseInt($('#valueContainer').text());              document.title = val + ': Pause';          } else {              increaseVal();           }    });         increaseVal();     </script>

View Demo

浏览器支持

如果想知道浏览器是否支持Visibility API，我建议去Can I use?去查询。但是建议用编程的方式去检测浏览器是否支持，可以参考Detect Support for Various HTML5 Features（译文：

http://www.ido321.com/1116.html)。在主流的现代浏览器中已经对这个API有了很好的支持

总结

我说过，有一个包含两个属性和一个事件的很不错的API给我们使用。它可以很容易的整合到你已经存在的应用中，并可以带来很好的用户体验。最后想说的是，当页面对用户不可见的时候，我们就可以控制页面的行为了。

下一篇：杂谈：HTML 5的消息通知机制