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

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

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

屬性

這個(gè)API部署在document對(duì)象上，提供以下兩個(gè)屬性。

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

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

這兩個(gè)屬性都帶有瀏覽器前綴。使用的時(shí)候，必須進(jìn)行前綴識(shí)別。

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)頁(yè)面的可見狀態(tài)發(fā)生變化時(shí)，會(huì)觸發(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