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模板如何判斷是手機支付還是掃碼支付