1. 程式人生 > >HTML5事件—visibilitychange 頁面可見性改變事件

HTML5事件—visibilitychange 頁面可見性改變事件

又看到一個很有意思的HTML5事件

 

visibilitychange事件是瀏覽器新新增的一個事件,當瀏覽器的某個標籤頁切換到後臺,或從後臺切換到前臺時就會觸發該訊息,現在主流的瀏覽器都支援該訊息了,例如Chrome, Firefox, IE10等。雖然這只是一個簡單的功能,但是能夠廣大的採用HTML5開發遊戲的開發者提供方便,比如使用者正在玩遊戲時,突然切換到後臺去發一條簡訊或打一個電話,再切換到遊戲,那麼開發者就需要捕捉對這些突發情形進行處理,當遊戲切換到後臺時就暫停遊戲,從後臺切換回來時,又能允許使用者繼續遊戲。

 

通過document. hidden

屬性可以判斷標籤是否可見。true時代表標籤不可見。 
這個事件適合在標籤不可見的時候減少網路請求、伺服器壓力等,也可以做一些好玩的事情,比如改變網頁標題的文字。

 

document.addEventListener("visibilitychange", function(){
    document.title = document.hidden ? "使用者離開了" : "使用者回來了";
});