HTML5中判斷使用者是否正在瀏覽頁面的方法

2022-09-22 01:42:10 字數 1159 閱讀 9514

現在,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...