幾年前，我們瀏覽網頁的時候是沒有選項卡瀏覽模式的，每一個網頁都會是一個瀏覽器窗口，如果我沒有記錯，Win7之前我們都是這樣瀏覽網頁的。作為一個程序員，我們經常會同時打開10-15個網頁，多的時候超過20個也不足為奇。

幾年前，我們瀏覽網頁的時候是沒有選項卡瀏覽模式的，每一個網頁都會是一個瀏覽器窗口，如果我沒有記錯，Win7之前我們都是這樣瀏覽網頁的。作為一個程序員，我們經常會同時打開10-15個網頁，多的時候超過20個也不足為奇。

為什么要使用這個API?

早期我們沒有辦法確定哪些選項卡是活動狀態的，但是現在通過HTML Visibility API，我們可以檢測訪客是否正在瀏覽我們的界面。

在這個教程中我們會介紹如何使用HTML5 Visibility API，同時我們也為你準備了一個簡單的demo來查看頁面的狀態。在demo中，我們將會根據頁面的狀態來修改文檔的標題。

查看頁面的狀態

隨著這個API的出現，我們又迎來了兩個新的document屬性，他們分別是document.visibilityState和document.hidden。

document.visibilityState 有四個可選值：

• hidden: 頁面在任何屏幕上都沒有被瀏覽。

• prerender: 頁面在選項卡中，但訪客現在沒有在這個選項卡上。

• visible: 訪客正在瀏覽。

• unloaded: 頁面已經被加載過了，現在跳轉在其它界面上了。

document.hidden是一個布爾類型的屬性。

現在我們可以根據頁面狀態來控制我們的網站了。

現在我們可以馬上知道我們頁面的availability屬性了。但是首先我們要做的是監聽這個事件，這樣一來我們就可以做出相應的事情。我已經寫好了一個簡單的監聽事件：

......

......

閱讀原文：通過HTML5 Visibility API檢測頁面活動狀態