JS 監聽瀏覽器各個標籤間的切換

這篇文章是別人寫的，以爲挺實用就搬過來了，跟你們分享一下。

之前看到過一些網頁，在標籤切換到其它地址時，網頁上的標題上會發生變化，一直不知道這個是怎麼作的，最近查了一些資料才發現有一個 visibilitychange 事件就能夠搞定，這裏將介紹一下頁面可見性（Page Visibility）API的簡單應用。

 

visibilitychange事件介紹

簡單的說，當用戶最小化網頁或移動到另外一個標籤時，API會發送 visibilitychange 有關該網頁的可見性的事件。你能夠檢測到該事件並執行一些操做或行爲。例如：標籤頁隱藏的時候中止播放音樂視頻、中止一些沒必要要的輪詢，還有中止一些諸如輪播等循環動畫效果等等。這些能夠節省服務器和本地的開銷。

用例

• 網站有一個圖片輪播，不該前進到下一張幻燈片，除非用戶正在查看該頁面。

• 顯示信息儀表板的應用程序不但願在頁面不可見時輪詢服務器以進行更新。

• 網頁要檢測其是否正在進行預渲染，以便其能夠準確計算網頁瀏覽量。

之前開發人員每每在客串上註冊 onblur 和onfocus 來檢測頁面是否是活動頁面，但它不會告訴您頁面對用戶是隱藏的。Page Visibility API 解決了這個問題。

瀏覽器兼容性

這個事件已經獲得現代瀏覽器普遍的支持，不過一些老版本的瀏覽器須要加相應的前綴。

Chrome (Webkit)	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
13前綴webkit  33無需前綴	10前綴moz 18無需前綴	10前綴ms	12.10	7

 

document的可見性屬性

Page Visibility (Second Edition) 中定義了2個只讀的 document 屬性：hidden 和 visibilityState。

其中 document.hidden 是一個布爾值，簡單的表示標籤頁顯示或者隱藏。而 document.visibilityState 屬性更爲詳細，目前有四個可能的值：

visible : 頁面內容至少部分可見。這意味着在實際狀況中，該網頁是一個非最小化窗口的可見標籤頁。

hidden : 頁面內容是對用戶不可見。實際上，這意味着該文檔是後臺標籤頁或最小化窗口的一部分，或者系統鎖屏是時的狀態。

prerender : 網頁內容被預渲染而且用戶不可見。

unloaded : 若是文檔被卸載，那麼這個值將被返回。

通常狀況下咱們使用 document.hidden 就能知足一般的需求。

爲了支持老版本的瀏覽器，咱們須要對 document.hidden 在作一些前綴處理：

 

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;
}

 

 一樣的，咱們能夠獲取 document.visibilityState 屬性：

function getVisibilityState() 
{
    var prefixes = ['webkit', 'moz', 'ms', 'o'];
    if ('visibilityState' in document) return 'visibilityState';
    for (var i = 0; i < prefixes.length; i++) 
    {
        if ((prefixes[i] + 'VisibilityState') in document)
            return prefixes[i] + 'VisibilityState';
    }
    // otherwise it's not supported
    return null;
}

 

這樣咱們能夠寫一個跨瀏覽器的函數，檢查文檔是否可見。

function isHidden() 
{
    var prop = getHiddenProp();
    if (!prop) return false;
    
    return document[prop];
}

 

visibilitychange監聽事件

你能夠在 document對象上註冊一個監聽 visibilitychange 事件，根據 document.hidden 或者 document.visibilityState 屬性作一些業務邏輯：

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) 
{
    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
    document.addEventListener(evtname, function () 
    {
        document.title = document[getVisibilityState()]+"狀態";
    }, false);
}