标签：erp 选项 可见性 hang 前缀 译文 develop 来源 value
译文来源：http://www.ido321.com/1126.html
译文：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 Prefix function 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 Property function hiddenProperty(prefix) { if (prefix) { return prefix + ‘Hidden‘; } else { return ‘hidden‘; } } // Get Browser Specific Visibility State function visibilityState(prefix) { if (prefix) { return prefix + ‘VisibilityState‘; } else { return ‘visibilityState‘; } } // Get Browser Specific Event function visibilityEvent(prefix) { if (prefix) { return prefix + ‘visibilitychange‘; } else { return ‘visibilitychange‘; } }
如今有了全部浏览器带前缀的属性和方法，就能够放心应用了。对之前的代码做出调整：
// Get Browser Prefix var 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>
浏览器支持
假设想知道浏览器是否支持Visibility API，我建议去Can I use?去查询。可是建议用编程的方式去检測浏览器是否支持。能够參考Detect Support for Various HTML5 Features（译文：
http://www.ido321.com/1116.html)。在主流的现代浏览器中已经对这个API有了非常好的支持
总结
我说过，有一个包括两个属性和一个事件的非常不错的API给我们使用。它能够非常easy的整合到你已经存在的应用中。并能够带来非常好的用户体验。最后想说的是，当页面对用户不可见的时候，我们就能够控制页面的行为了。
下一篇：杂谈：HTML 5的消息通知机制
标签：erp 选项 可见性 hang 前缀 译文 develop 来源 value
原文地址：http://www.cnblogs.com/jzdwajue/p/6751915.html
