Page Visibility API頁面可見性事件監聽的相容性寫法
阿新 • • 發佈:2018-11-07
考慮到這個API在各個版本各個型別的瀏覽器表現有所不同,所以小鄒下面給大夥出一個相容性的寫法:
// 設定隱藏屬性和改變可見屬性的事件的名稱 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } var videoElement = document.getElementById("videoElement"); // 如果頁面是隱藏狀態,則暫停視訊 // 如果頁面是展示狀態,則播放視訊 function handleVisibilityChange() { if (document[hidden]) { videoElement.pause(); } else { videoElement.play(); } } // 如果瀏覽器不支援addEventListener 或 Page Visibility API 給出警告 if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); } else { // 處理頁面可見屬性的改變 document.addEventListener(visibilityChange, handleVisibilityChange, false); // 當視訊暫停,設定title // This shows the paused videoElement.addEventListener("pause", function(){ document.title = 'Paused'; }, false); // 當視訊播放,設定title videoElement.addEventListener("play", function(){ document.title = 'Playing'; }, false); }