HTML5實(shí)現(xiàn)頁面切換激活的PageVisibility API使用初探
我要評論HTMl5 推出了一個(gè)很“特別”的 API Page Visibility ，之所以說它特別，是因?yàn)檫@個(gè) API 關(guān)注的是一個(gè)很少人留意的功能 —— 瀏覽器標(biāo)簽( tab ) 是否被激活。這里必須解釋一下，這個(gè)“激活”，指的是這個(gè)標(biāo)簽是否正被用戶瀏覽，或者說是否為當(dāng)前標(biāo)簽。
那么，這個(gè) API 究竟有些什么用途呢？通常，很多傳統(tǒng)的頁面在用戶沒有激活它的時(shí)候，它還會繼續(xù)工作，例如，當(dāng)用戶正在瀏覽新聞門戶，而他之前打開的 NBA 球賽頁面會繼續(xù)刷新獲取最新結(jié)果，視頻網(wǎng)站會繼續(xù)占用帶寬加載資源，于是，如果這類不必要的工作太多了，就會造成很多的資源浪費(fèi)。因此，這貨相當(dāng)有用：
Web 程序每隔一段時(shí)間會自動更新頁面信息，確保用戶獲取到及時(shí)的信息，但是，當(dāng)用戶正在瀏覽其他頁面時(shí)，可以控制它暫停更新。
視頻網(wǎng)站在播放在線視頻時(shí)會不斷加載視頻，直到視頻加載完畢，但是，當(dāng)用戶正在瀏覽其他頁面時(shí)，可以暫停加載視頻資源，節(jié)省帶寬。
網(wǎng)站首頁上有個(gè)大幻燈自動播放，當(dāng)用戶瀏覽其他頁面了，就可以暫停播放。
于是，通過 Page Visibility ，我們可以至少達(dá)到以下一種或幾種的好處：
1.節(jié)省服務(wù)器資源，Ajax 輪詢這類服務(wù)器資源占用常常會被忽略，關(guān)閉這種請求可以節(jié)省資源。
2.節(jié)省內(nèi)存消耗。
3.節(jié)省帶寬消耗。
因此，使用 Page Visibility 無論是對于用戶還是服務(wù)器都有好處。
接下來正式介紹一下這個(gè) API 。Page Visibility 會在瀏覽器的 document 對象上添加兩個(gè)屬性 hidden 和 visibilityState 。如果當(dāng)前的標(biāo)簽被激活了，那么 document.hidden 的值為 false ，否則為 true 。visibilityState 則有4個(gè)可能值：
hidden：當(dāng)瀏覽器最小化、切換標(biāo)簽、電腦鎖屏?xí)r visibilityState 值是 hidden
visible：當(dāng)瀏覽器上下文（context）的 document 至少顯示在一個(gè)屏幕當(dāng)中時(shí)，返回 visible；當(dāng)瀏覽器窗口沒有最小化，但是瀏覽器被其他應(yīng)用遮擋時(shí)，這時(shí)也為 visible
prerender：當(dāng)文檔被加載到屏幕畫面以外或者不可見時(shí)返回 prerender，這個(gè)是非必要屬性，瀏覽器可選擇性的支持。
unloaded：當(dāng)文檔將要被離開 ( unload ） 時(shí)返回 unloaded，瀏覽器也可選擇性的支持這個(gè)屬性
另外，document 上會添加 visibilitychange 事件，當(dāng) document 的可見性改變時(shí)觸發(fā)該事件。
好了，介紹完屬性，放上一個(gè) Demo （打開后切換標(biāo)簽即可測試）。
這個(gè) Demo 的作用是看標(biāo)簽的可見性是否改變 ，并且在標(biāo)簽可見性發(fā)生改變時(shí)產(chǎn)生提示。
值得注意的是，在目前，瀏覽器對于 Page Visibility 的支持還是通過私有屬性支持，因此在檢測或利用 Page Visibility 提供的屬性時(shí)需要加上瀏覽器私有前綴，例如在 Chrome 中檢測上面的 visibilityState 屬性時(shí)，就需要檢測 document.webkitVisibilityState 而不是 document.visibilityState 。所以，Demo 中會首先檢測瀏覽器類型，然后才使用 Page Visibility 的 API 。主要代碼如下：
在上面的代碼中,同樣,在CHROME運(yùn)行下,在LOAD事件中,相關(guān)的 webkitvisibilitychange事件(這個(gè)在CHROME下),如果是IE 10,則是 msvisibilitychange事件,然后在回調(diào)函數(shù)中,開始了計(jì)算用戶在頁面停留的時(shí)間, 所以當(dāng)你打開其他TAB頁或者最小化后,再切換回原來這個(gè)頁,則會彈出顯示:你離開了頁面多長時(shí)間 。
要注意的是,在CHROME中,屬性命名為webkitHidden,事件為 webkitvisibilitychange事件,而在IE 10中,屬性為msHidden 和 msVisibilityState.
相關(guān)文章
- Microdata作為HTML5新增的一個(gè)特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實(shí)現(xiàn)自動換行的網(wǎng)格布局，感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時(shí)區(qū)動態(tài)時(shí)鐘實(shí)戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動態(tài)時(shí)鐘的web展示,通過Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動態(tài)轉(zhuǎn)動,每個(gè)時(shí)鐘上都會標(biāo)注出對應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框＜select＞標(biāo)簽的屬性和樣式詳解
在HTML5中，下拉框（<select>標(biāo)簽）作為表單的重要組成部分，為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式，并重點(diǎn)介2025-02-27
本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器，感興趣的朋友一起看2025-02-17
本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖2025-02-17- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣2025-02-17
HTML5使用details標(biāo)簽：展開/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個(gè)不用js即可實(shí)現(xiàn)展開/收縮信息，很方便用來讓用戶先才答案，然后下面點(diǎn)擊再給出答案的效果，這里就為大家簡單介紹一下，2024-11-03
