使用 Page Visibility API ，讓網站更友好

咱們可能都有這樣的經歷：打開一個瀏覽器，加載以前打開的全部標籤頁，聽到幾個頁面發出的混合在一塊兒的聲音。雖然瀏覽器經過標籤的聲音圖標、插件等方法告知用戶發聲的頁面，但這種體驗仍是很糟糕。做爲開發者和設計者，咱們有責任讓網站更受歡迎。

網站是否是應該在被激活使用時才能發出聲音？爲何咱們要浪費資源和進程在咱們看不到的動畫上？

幸運的是，如今有一個解決方案：HTML5 有個Page Visibility（頁面可見性）的API。你能夠看到Active Theory已經在新項目裏使用了這個API。例如Under Armor 和 A Spacecraft For All

幸運的是，如今有一個解決方案：HTML5 有個頁面可見（Page Visibility）的API。你能夠看到Active Theory已經在新項目裏使用了這個API。例如Under Armor 和 A Spacecraft For All：點擊其餘標籤頁，剛纔還在運行的多媒體就會暫停。我喜歡把這樣的網站成爲「有禮貌的網站（polite web）」：網站考慮了用戶的注意力、帶寬等。

開發者曾經用綁定onblur()和onfocus()事件來嘗試完成這樣的效果。他們這樣比什麼都不作的好，可是這樣的作法不能分辨窗口是不是真的隱藏。好比：有兩個左右並排的窗口，用戶都能看到他們的內容，可是在兩個窗口之間切換時仍是或激發onblur()或onfocus()事件。

使用Page Visibility

有不少使用Page Visibility API的狀況，最多見的狀況是——頁面有一個視頻，但用戶看不到它，那就沒有必要繼續播放它。

<video autoplay controls id="videoElement">
    <source src="rar.mp4">
    <source src="rar.webm">
</video>

<script>
var videoElement = document.getElementById("videoElement");

document.addEventListener("visibilitychange", function() {
    if (document.hidden) {     
        videoElement.pause();  
    } else {
        videoElement.play();   
    } 
});
</script>

可是這樣有個問題，讓用戶以爲有點忽然：用戶切換標籤時忽然打開或中止視頻的聲音。能夠把效果改成切換標籤時漸漸顯示或隱藏聲音。這個能夠藉助jQuery的動畫方法完成。

<script>
var videoElement = document.getElementById("videoElement");

document.addEventListener("visibilitychange", function() {
    if (document.hidden) {     
        $("#videoElement").animate({volume: 0}, 1000, "linear", function() {
            videoElement.pause();
        });
    } else {
        videoElement.play();  
        $("#videoElement").animate({volume: 1}, 1000, "linear");
    } 
});
</script>

規範

Page Visibility API的規範很簡單，只有兩個方法：document.hidden 根據瀏覽器窗口的狀態返回 true 或 false。具體的狀態存儲在document.visibilityState（hidden 、 visible、prerender、unloaded）裏。visibilitychange能夠做爲一個事件。document.visibilityState能夠檢測爲何document不可見。可是document.hidden已經能知足大部分的需求。

注意事項和瀏覽器支持

Page Visibility API採用保守的方式來報告document的隱藏：若是用戶在同一瀏覽器窗口裏切換就會報告，但若是是用別的窗口遮住當前頁面，就不會報告。這個API不是萬無一失的，在某些狀況下會誤報，使用的時候要當心。

瀏覽器對Page Visibility API的支持是比較好的：全部的現代瀏覽器（除了Opera Mini）都支持這個API，包括IE10+。供應商前綴也慢慢取消：目前須要-webkit前綴是Android和黑莓的瀏覽器。我在上面的代碼中爲了簡化操做，沒有加前綴。可是添加前綴和測試也很方便。

Page Visibility API是Progressive Enhancement（漸進加強）的一個好例子。若是瀏覽器不支持這個API，該腳本將被忽略，用戶將像平時同樣被不受控制的聲音打擾。

其餘用法

Page Visibility API不只能夠用於聲音和視頻，還能夠用於slider 、 PPT。

使用這個API可使網站更友好、更綠色、更有責任感。建議廣大開發者和設計師考慮把它整合到本身的項目中。

---

英文原文：Creating Well-Behaved Sites With The Page Visibility API
由 SegmentFault 整理編譯