這個是今天剛發現的，想起之前那個在頁面用video標簽視頻播放，別人切換頁面後仍在繼續播放，體驗很不好，用這個API就可以很完美的解決。

Page Visibility API 可以讓你獲取到這種狀態。在用戶使用切換標簽的方式來瀏覽網頁時,非常合理的情況是任何在後臺頁面都不會展示給用戶。 當用戶最小化網頁或者瀏覽到其他標簽的網頁時，API將發送一個關於當前頁面的可見信息的事件visibilitychange。你可以檢測該事件然後執行一些活動或是展示不同的效果。比如，如果你的網站app正在播放一個視頻，也許當用戶瀏覽其他瀏覽器時它可以暫停，那麽當用戶切換回來的時候，就可以繼續播放了。用戶可以繼續觀看，不會因為瀏覽其他的瀏覽器導致丟失當前視頻的進度。

1、document.hidden

為布爾值，頁面隱藏狀態時返回true，否則返回false

2、document.visibilityState

顧名思義就是狀態：

visible : 頁面內容至少是部分可見。 在實際中，這意味著頁面是非最小化窗口的前景選項卡；

hidden : 頁面內容對用戶不可見。 在實際中，這意味著文檔可以是一個後臺標簽，或是最小化窗口的一部分，或是在操作系統鎖屏激活的狀態下；

prerender : 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當做隱藏). 文檔可能初始狀態為prerender，但絕不會從其它值轉為該值。 註釋：瀏覽器支持是可選的；

unloaded : 頁面正在從內存中卸載。 註釋：瀏覽器支持是可選的。

一般我們主要也就用到前兩個

舉一個非常簡單的例子

 document.addEventListener("visibilitychange",function () {
        console.log(document.hidden)
    })

在遊覽器標簽切換一下我們會發現是產生效果的

這樣我們就可以根據不同的狀態進行相對應的操作。

接下來就是非常重要的兼容性,測試了一下在IE9及一下是不可以的，這也在意料之中，別的遊覽器只測試了我電腦上版本都是支持的只是有的需要前綴。扔一段檢測及兼容主要遊覽器的代碼如下（來自張鑫旭博客）

var pageVisibility = (function() {
    var prefixSupport, keyWithPrefix = function(prefix, key) {
        if (prefix !== "") {
            return prefix + key.slice(0,1).toUpperCase() + key.slice(1);
        }
        return key;
    };
    var isPageVisibilitySupport = (function() {
        var support = false;
        if (typeof window.screenX === "number") {
            ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) {
                    prefixSupport = prefix;
                    support = true;
                }
            });
        }
        return support;
    })();

    var isHidden = function() {
        if (isPageVisibilitySupport) {
            return document[keyWithPrefix(prefixSupport, "hidden")];
        }
        return undefined;
    };

    var visibilityState = function() {
        if (isPageVisibilitySupport) {
            return document[keyWithPrefix(prefixSupport, "visibilityState")];
        }
        return undefined;
    };

    return {
        hidden: isHidden(),
        visibilityState: visibilityState(),
        visibilitychange: function(fn, usecapture) {
            usecapture = undefined || false;
            if (isPageVisibilitySupport && typeof fn === "function") {
                return document.addEventListener(prefixSupport + "visibilitychange", function(evt) {
                    this.hidden = isHidden();
                    this.visibilityState = visibilityState();
                    fn.call(this, evt);
                }.bind(this), usecapture);
            }
            return undefined;
        }
    };
})(undefined);

如果不支持會返回undefined.

H5 之 Page Visibility