頁面可見性 API 簡介

Web 開發人員的一個主要痛點是知道用戶何時實際與頁面交互。如果頁面被最小化或隱藏在另一個選項卡後面，則繼續執行諸如輪詢服務器以獲取更新或執行動畫之類的功能可能沒有意義。 Page Visibility API 旨在為開發人員提供有關頁面是否對用戶可見的信息。

API本身很簡單，由三部分組成：

• document.hidden – 一個布爾值，指示頁面是否從視圖中隱藏。這可能意味著該頁面位於後台選項卡中或瀏覽器已最小化。
• document.visibilityState – 指示四種狀態之一的值：
  1. 頁面位於後台標籤中或瀏覽器已最小化。
  2. 頁面位於前台選項卡中。
  3. 實際頁面被隱藏，但頁面預覽可見（例如在 Windows 7 中將鼠標移到任務欄中的圖標上時）。
  4. 頁面正在屏幕外預渲染。
• visibilitychange event – 當文檔從隱藏變為可見時觸發此事件，反之亦然。

在撰寫本文時，只有 Internet Explorer 10 和 Chrome（12+）實現了 Page Visibility API。 Internet Explorer 以“ms”為前綴，而 Chrome 以“webkit”為前綴。所以 document.hidden 實現為 document.msHidden 在 Internet Explorer 和 document.webkitHidden 中 在鉻。檢查支持的最佳方法是使用以下代碼：

function isHiddenSupported(){
     return typeof (document.hidden || document.msHidden || document.webkitHidden) != "undefined";
 }

要檢查頁面是否隱藏，可以使用以下方法：

function isPageHidden(){
     return document.hidden || document.msHidden || document.webkitHidden;
 }

請注意，此代碼將表明該頁面沒有隱藏在不支持的瀏覽器中，這是 API 為向後兼容而有意的行為。

要在頁面從可見變為隱藏或從隱藏變為可見時收到通知，您可以監聽 visibilitychange 事件。在 Internet Explorer 中，此事件稱為 msvisibilitychange 在 Chrome 中它被稱為 webkitvisibilitychange .為了在兩種瀏覽器中工作，您需要為每個事件分配相同的事件處理程序，如下例所示：

function handleVisibilityChange(){
    var output = document.getElementById("output"),
        msg;
        
    if (document.hidden || document.msHidden || document.webkitHidden){
        msg = "Page is now hidden." + (new Date()) + "<br />"
    } else {
        msg = "Page is now visible." + (new Date()) + "<br />"
    }
    
    output.innerHTML += msg;
    
}

//need to add to both
document.addEventListener("msvisibilitychange", handleVisibilityChange, false);
document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);

此代碼在 Internet Explorer 和 Chrome 中運行良好。此外，這部分 API 相對穩定，因此在實際 Web 應用程序中使用代碼是安全的。

差異

實現之間最大的區別在於 document.visibilityState . Internet Explorer 10 PR 2 的 document.msVisibilityState 是代表四個常量之一的數值：

1. document.MS_PAGE_HIDDEN (0)
2. document.MS_PAGE_VISIBLE (1)
3. document.MS_PAGE_PREVIEW (2)
4. document.MS_PAGE_PRERENDER (3)

在 Chrome 中，document.webkitVisibilityState 是三個可能的字符串值之一：

1. “隱藏”
2. “可見”
3. “預渲染”

Chrome 並沒有為每個狀態提供常量，但最終的實現可能會包含它們。

由於這些差異，建議不要依賴供應商前綴版本的 document.visibilityState 而是堅持使用 document.hidden .

用途

Page Visibility API 的預期用途是向頁面發出用戶未與頁面交互的信號。例如，您可以使用該信息停止從服務器輪詢更新或停止動畫（儘管如果您使用的是 requestAnimationFrame() ，這將自動發生）。

經過一番思考，我意識到 Page Visibility API 更多的是關於用戶而不是頁面，因此我添加了對我的 YUI 3 Idle Timer 組件的支持。該組件現在觸發 idle 頁面隱藏時的事件和 active 頁面再次可見時的事件。

無論是使用 Idle Timer，還是單獨使用 Page Visibility API，這個新功能都可以讓 Web 開發人員急需地了解瀏覽器對我們的 Web 應用程序所做的事情。我希望看到 W3C 性能組取得更多重大進展。