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