首頁 web前端 H5教程 HTML5 visibilityState屬性詳細介紹與使用實例_html5教學技巧

HTML5 visibilityState屬性詳細介紹與使用實例_html5教學技巧

May 16, 2016 pm 03:48 PM
html5

這裡必須解釋一下,這個“激活”,指的是這個標籤是否正被用戶瀏覽,或者說是否為當前標籤。

那麼,這個 API 究竟有些什麼用途呢?通常,許多傳統的頁面在用戶沒有激活它的時候,它還會繼續工作,例如,當用戶正在瀏覽新聞門戶,而他之前打開的NBA 球賽頁面會繼續刷新獲取最新結果,視頻網站會繼續佔用頻寬載入資源,於是,如果這類不必要的工作太多了,就會造成很多的資源浪費。因此,這貨相當有用:

1.Web 程式每隔一段時間會自動更新頁面信息,確保用戶獲取到及時的信息,但是,當用戶正在瀏覽其他頁面時,可以控制它暫停更新。
2.視頻網站在播放線上影片時會不斷加載視頻,直到視頻加載完畢,但是,當用戶正在瀏覽其他頁面時,可以暫停加載視頻資源,節省頻寬。
3.網站首頁有大幻燈自動播放,當使用者瀏覽其他頁面了,就可以暫停播放。

於是,透過 Page Visibility ,我們可以至少達到以下一種或幾種的好處:

1.節省伺服器資源,Ajax 輪詢這類伺服器資源佔用常常會被忽略,關閉這種請求可以節省資源。
2.節省記憶體消耗。
3.節省頻寬消耗。

因此,使用 Page Visibility 無論是對使用者或伺服器都有好處。

接下來正式介紹一下這個 API 。 Page Visibility 會在瀏覽器的 document 物件上新增兩個屬性 hidden 和 visibilityState 。如果目前的標籤被啟動了,那麼 document.hidden 的值為 false ,否則為 true 。 visibilityState 則有4個可能值:

1.hidden:瀏覽器最小化、切換標籤、電腦鎖定畫面時 visibilityState 值是 hidden
2.visible:當瀏覽器最頂級上下文(context)的document 至少顯示在一個螢幕當中時,返回visible;當瀏覽器視窗沒有最小化,但是瀏覽器被其他應用遮擋時,這時也為visible
3.prerender:當文件載入到螢幕畫面以外或不可見時回傳 prerender,這個是非必要屬性,瀏覽器可選擇性的支援。
4.unloaded:當文件將要離開 ( unload ) 時傳回 unloaded,瀏覽器也可選擇性的支援這個屬性

另外,document 上會加入 visibilitychange 事件,當 document 的可見性改變時觸發該事件。

好了,介紹完屬性,放上一個使用實例(複製程式碼儲存到一個HTML文件,開啟後切換標籤即可測試效果)。


複製程式碼
程式碼如下:





測試 HTML5 Page Visibility API


<script><br /> function browerKernel(){<br /> var result;<br /> ['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){ <p> if( typeof document[ prefix 'Hidden' ] != 'undefined' ){<br /> result = prefix;<br /> }<br /> });<br /> return result;<br /> }<br /> function init(){<br /> prefix = browerKernel();<br /> var showTip = document.getElementById('showTip');<br /> document.addEventListener( prefix 'visibilitychange', function onVisibilityChange(e){<br /> var tip = null; <br /> if( document[ prefix 'VisibilityState' ] == 'hidden' ) tip = '<p>離開頁面';<br /> else if( document[ prefix 'VisibilityState' ] == 'visible' ) tip = '<p>進入頁';<br /> showTip.innerHTML = showTip.innerHTML tip;<br /> });<br /> }<br /> window.onload = init();<br /> </script>

這個實例的作用是監聽標籤的可見性是否改變 ,並且在標籤可見性改變時產生提示。

值得注意的是,在目前,瀏覽器對於Page Visibility 的支援還是透過私有屬性支持,因此在偵測或利用Page Visibility 提供的屬性時需要加上瀏覽器私有前綴,例如在Chrome 中偵測上面的visibilityState 屬性時,就需要偵測document.webkitVisibilityState 而不是document.visibilityState 。所以,Demo 中會先偵測瀏覽器類型,然後才使用 Page Visibility 的 API 。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles