現在,html5裡頁面可見性介面就提供給了程式設計師乙個方法,讓他們使用visibilitychange頁面事件來判斷當前頁面可見性的狀態,並針對性的執行某些任務。同時還有新的document.hidden屬性可以使用。
documen程式設計客棧t.hidden
這個新出現的document.hidden屬性,它顯示頁面是否為使用者當前**的頁面,值為ture或false。
document.visibilitystate
visibilitystate的值要麼是visible (表明頁面為瀏覽器當前啟用tab,而且視窗不是最小化狀態),要麼是hidden (頁面不是當前啟用tab頁面,或者視窗最小化了。),或者prerender (頁面在重新生成,對使用者不可見。).
visibilitychange事件
監聽頁面可見性變化非常容易:
複製**
**如下:
// 各種瀏覽器相容
var hidden, state, visibilitychange;
if (typeof document.hidden !== "undefined") else if (typeof document.mozhidden !== "undefined") else if (typeof document.mshidden !== "undefined") else if (typeof document.webkithidden !== "undefined"hrrujvpifg)
// 新增***,在title裡顯示狀態變化
document.addeventlistener(visibilitychange, function() , false);
// 初始化
document.title = document[state];
上面的**會在頁面可見性發生變化時修改document.title的值!
那麼,什麼時候需要使用visibilitychange事件呢?比如,如果你的頁面上有嵌入**正在**,當使用者切換到其它標籤頁時,你的標籤頁上的**應自動暫停**,當使用者切換回來時繼續接著**。再比如,如果你的頁面有自動重新整理動作,當使用者切換到其它標籤頁時,你就應該停止重新整理,而當使用者切換回來時繼續之前的動作。
本文標題: html5中判斷使用者是否正在瀏覽頁面的方法
本文位址: /web/html5/8878.html
js判斷是否支援html5新特性
if modernizr.geolocation 用於檢測是否支援geolocation.if modernizr.canvas 用於檢測是否支援canvas.if modernizr.video else if modernizr.video.ogg else if modernizr.video...
HTML5是否會取代Flex
隨著網際網路的快速發展,在當今的web應用開發中,flex佔據的部分越來越大。例如大多數網頁遊戲,部分介面上是全flash的 等都是flex的傑作,其中的乙個共同點就是使用者的體驗效果非常豐富。儘管使用flash完全可以實現flex的效果,但是使用flex能讓程式設計師更方便地開發ria應用。其實我...
HTML5中判斷橫屏豎屏
寫在同乙個css中 media screen and orientation portrait media screen and orientation landscape 分開寫在2個css中 豎屏 橫屏 判斷手機橫豎屏狀態 window.addeventlistener onorientatio...