HTML5 Page Visibility

2022-11-24 14:41:33 字數 1444 閱讀 2176

什麼是 page visibility ?頁面可見性(page visibility)api可以有哪些用途

儀表盤的應用程式不希望在頁面不可見時輪詢伺服器進行更新。

頁面想要檢測是否正在渲染,以便可以準確的計算網頁瀏覽量

當裝置進入待機模式時,**想要關閉裝置聲音(使用者按下電源鍵關閉螢幕)

可應用於登入同步

還有一些切換效果,比方說,每次使用者切換到你這個頁面上的時候,logo抖一下,或頁面一道亮光閃過,或者其他效果

如何使用?

page visibility api的規範很簡單,只有兩個屬性:

document.hidden 根據瀏覽器視窗的狀態返回布林值 true 或 false。

document.visibilitystate儲存具體的狀態字串。一共有四種狀態:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>0 : run

title

>

head

>

<

body

>

<

h1>你在頁面停留的時間為 <

span

id="time"

>0

span

> s

h1>

<

h1>這是你第 <

span

id="count"

>0

span

> 次離開又回來了。

h1>

<

script

>

vari =0

, count =0

, si

=setinterval(

function

() ,

1000

); document.addeventlistener(

"visibilitychange",

function

()

else

, 1000

); }

});script

>

body

>

html

>

上例**大意是:當頁面可見時,計時停留的時間,當頁面不可見時,計時器停止,頁面標題與之同步(切換標籤頁時注意標題)。再次返回頁面,繼續計時並且顯示當前離開又回來的次數。

HTML5

1 document.hidden 支援page visibility的瀏覽器在document上新增一個hidden屬性 不同瀏覽器可能需要字首,如webkithidden 看當前tab頁是否啟用,啟用 focus 時document.hidden屬性是false,否則是true。document...

Basic HTML and HTML5

注 內容來自 目錄一級標題使用結束,其他級別標題類似。段落用開始,以 結束,並且是小寫,大寫不可用。hello paragraph html中的註釋以結束。使用main關鍵字幫助瀏覽器和其他開發者快速找到頁面的主題部分。hello paragraph 使用img關鍵字將影象新增到您的 並使用src屬...

HTML5初探 基本的HTML5模版

用html5已經有一段時間了,卻沒有時間來個系統的學習。最近開始準備系統地學習html5,順便開博寫些自己學習的心得。首先看下html5的基本模版吧,從基本結構的定義上就看到html5的基本模版更加簡潔,沒有那些繁瑣的dtd定義,僅僅用一條就定義了html5的標準,而僅僅一個就定義了文件的字元編碼。...