HTML5 API --- 頁面可見性改變(visibilitychange)事件
阿新 • • 發佈：2019-01-22
visibilitychange事件是瀏覽器新新增的一個事件，當瀏覽器的某個標籤頁切換到後臺，或從後臺切換到前臺時就會觸發該訊息，現在主流的瀏覽器都支援該訊息了，例如Chrome, Firefox, IE10等。雖然這只是一個簡單的功能，但是能夠廣大的採用HTML5開發遊戲的開發者提供方便，比如使用者正在玩遊戲時，突然切換到後臺去發一條簡訊或打一個電話，再切換到遊戲，那麼開發者就需要捕捉對這些突發情形進行處理，當遊戲切換到後臺時就暫停遊戲，從後臺切換回來時，又能允許使用者繼續遊戲。
下面是一個簡單的例項程式碼，當應用程式或瀏覽器標籤頁切換到後臺時就停止播放音樂，從後臺切換回來時又開始播放音樂。
注意：現在某些瀏覽器還保留了visibilitychange的字首，例如Chrome瀏覽器還保留著webkit字首，不過該事件已經趨於穩定，在Chrome 33及以後就去掉了字首，直接使用visibilitychange，這裡只是一個簡單的例項程式，大家可以針對這個程式做簡單修改，相容更多的瀏覽器。<html> <body onload="load()"> <audio id="audio_id"> <source src="demo-audio.mp3"/> <source src="demo-audio.ogg"/> Browser can't support Audio tag. </audio> <script> var audioElement = document.getElementById("audio_id"); function onVisibilityChanged(event) { var hidden = event.target.webkitHidden; if (hidden) audioElement.pause(); else audioElement.play(); } function load() { audioElement.play(); audioElement.loop = true; document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false); } </script> </body> </html>