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


  我們需要在特定的時候判斷頁面的顯示狀態,例如:當視頻加載到可播放狀態時,根據用戶是否停留在當前頁面來決定是否開始自動播放。頁面的展示的狀態的判斷就需要用到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);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM