Page Visibility API（頁面狀態(tài)監(jiān)聽）

PageVisibility API用于判斷頁面是否處于瀏覽器的當(dāng)前窗口，即是否可見。

使用這個API，可以幫助開發(fā)者根據(jù)用戶行為調(diào)整程序。比如，如果頁面處于當(dāng)前窗口，可以讓程序每隔15秒向服務(wù)器請求數(shù)據(jù)；如果不處于當(dāng)前窗口，則讓程序每隔幾分鐘請求一次數(shù)據(jù)。

屬性

這個API部署在document對象上，提供以下兩個屬性。

• document.hidden：返回一個布爾值，表示當(dāng)前是否被隱藏。

• document.visibilityState：表示頁面當(dāng)前的狀態(tài)，可以取三個值，分別是visibile（頁面可見）、hidden（頁面不可見）、prerender（頁面正處于渲染之中，不可見）。

這兩個屬性都帶有瀏覽器前綴。使用的時候，必須進行前綴識別。

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

VisibilityChange事件

當(dāng)頁面的可見狀態(tài)發(fā)生變化時，會觸發(fā)VisibilityChange事件（帶有瀏覽器前綴）。

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

參考鏈接

• W3草案：http://www.w3.org/TR/page-visibility/
• David Walsh, Page Visibility API
• Joe Marini, Using the pageVisbility API
• Jatinder Mann, Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 2