html5中頁面可見性的判斷（附程式碼）

這篇文章帶給大家的內容是關於html5裡頁面可見性的判斷（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

visibilitychange頁面事件來判斷目前頁面可見性的狀態，並針對性的執行某些任務

document.hidden

新出現的document.hidden屬性，它顯示頁面是否為使用者目前觀看的頁面，值為ture或false。

document.visibilityState

visibilityState的值要麼是visible (表示頁面為瀏覽器目前啟動tab，而且視窗不是最小化狀態) ，要么是hidden (頁面不是當前激活tab頁面，或者視窗最小化了。)，或者prerender (頁面在重新生成，對用戶不可見。).

visibilitychange事件

// 各种浏览器兼容 var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") { 
    hidden = "hidden";
    visibilityChange = "visibilitychange"; 
    state = "visibilityState"; 
} else if (typeof document.mozHidden !== "undefined") { 
    hidden = "mozHidden"; 
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState"; 
} else if (typeof document.msHidden !== "undefined") { 
    hidden = "msHidden"; 
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState"; 
} else if (typeof document.webkitHidden !== "undefined") { 
    hidden = "webkitHidden"; 
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
 } 
// 添加监听器，在title里显示状态变化
document.addEventListener(visibilityChange, function() { 
    document.title = document[state]; }, false);
// 初始化 
document.title = document[state];

 新增監聽

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

document.addEventListener("msvisibilitychange", function() {
  console.log( document.msVisibilityState);
});

document.addEventListener("mozvisibilitychange", function() {
  console.log( document.mozVisibilityState);
});

document.addEventListener("webkitvisibilitychange", function() {
  console.log( document.webkitVisibilityState);
});

 相關文章推薦：

PHP中抽象方法以及抽象類別與介面的簡單介紹

什麼是容器(Container)和門面(Facade)？ thinkphp5.1中容器與門面的淺析

 thinkphp模板如何判斷是手機微信支付還是微信掃碼支付

以上是html5中頁面可見性的判斷（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！