H5 提供了很多簡單實用的 API，Page Visibility API 就是其中之一。
不知道用戶是不是在與頁面交互，這是困擾廣大 Web 開發人員的一個主要問題。如果 頁面最小化了 或者 隱藏在了其他標簽頁后面，那么有些功能是可以停下來的，比如輪詢服務器或者某些動畫效果。那么如何判斷呢？
H5 之前，我們可以監聽 onfocus() 事件。如果當前窗口得到焦點，那么我們可以簡單認為用戶在與該頁面交互，如果失去焦點（onblur()），那么可以認為用戶停止與該頁面交互。
// 當前窗口得到焦點
window.onfocus = function() {
// 動畫
// ajax 輪詢等等
};
// 當前窗口失去焦點
window.onblur = function() {
// 停止動畫
// 停止 ajax 輪詢等等
};
但是這樣的方法顯然是很 "粗糙" 的。思考這樣一個場景，一邊打開瀏覽器看視頻，一邊擼代碼，很顯然，焦點集中在編輯器中，那么瀏覽器失去焦點，就意味着用戶沒在與頁面交互了嗎？
H5 引入的 Page Visibility API，能很有效地幫助我們完成這樣的判斷。
這個 API 本身非常簡單，由以下三部分組成。
-
document.hidden：表示頁面是否隱藏的布爾值。頁面隱藏包括 頁面在后台標簽頁中 或者 瀏覽器最小化（注意，頁面被其他軟件遮蓋並不算隱藏，比如打開的 sublime 遮住了瀏覽器）
-
document.visibilityState：表示下面 4 個可能狀態的值
- hidden：頁面在后台標簽頁中或者瀏覽器最小化
- visible：頁面在前台標簽頁中
- prerender：頁面在屏幕外執行預渲染處理 document.hidden 的值為 true
- unloaded：頁面正在從內存中卸載
-
Visibilitychange 事件：當文檔從可見變為不可見或者從不可見變為可見時，會觸發該事件。
這樣，我們可以監聽 Visibilitychange 事件，當該事件觸發時，獲取 document.hidden 的值，根據該值進行頁面一些事件的處理。
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
// 動畫停止
// 服務器輪詢停止 等等
} else {
// 動畫開始
// 服務器輪詢
}
});
提供一個兼容各高級瀏覽器以及低版本 IE 寫法（低版本 IE 用 onfocus/onblur 兼容）：
(function() {
var hidden = "hidden";
// Standards:
if (hidden in document)
document.addEventListener("visibilitychange", onchange);
else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
// IE 9 and lower:
else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
// All others:
else
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;
function onchange (evt) {
var v = "visible", h = "hidden",
evtMap = {
focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
};
evt = evt || window.event;
if (evt.type in evtMap)
document.body.className = evtMap[evt.type];
else
document.body.className = this[hidden] ? "hidden" : "visible";
}
// set the initial state (but only if browser supports the Page Visibility API)
if( document[hidden] !== undefined )
onchange({type: document[hidden] ? "blur" : "focus"});
})();
onfocusin and onfocusout are required for IE 9 and lower, while all others make use of onfocus and onblur, except for iOS, which uses onpageshow and onpagehide.
document.visibilityState 是雞肋，感覺並沒什么卵用；兼容性是軟肋，IE10+ 才提供支持。
Read More：