頁面可見性判斷：document.hidden與visibilitychange事件

楊小匠發表於2018-07-12
事件

　　我們需要在特定的時候判斷頁面的顯示狀態，例如：當視訊載入到可播放狀態時，根據使用者是否停留在當前頁面來決定是否開始自動播放。頁面的展示的狀態的判斷就需要用到html5新增的一個api：document.hidden。

　　document.hidden屬性：bool型，表示頁面是否處於隱藏狀態。頁面隱藏包括頁面在後臺標籤頁或者瀏覽器最小化。

　　visibilitychange事件：當文件的可見性改變時觸發。

 　　相容性寫法如下，當在瀏覽器裡切換標籤頁或者最小化時就會console列印出狀態的變化：

    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    
    // 新增監聽器
    document.addEventListener(visibilityChange, function() {
        console.log("當前頁面是否被隱藏：" + document[hidden]);
    }, false);

 

相關文章