頁(yè)面可見(jiàn)性API可以讓你知 道一個(gè)頁(yè)面什么時(shí)候是隱藏的,什么時(shí)候是顯示的.當(dāng)頁(yè)面被最小化或者被切換成后臺(tái)標(biāo)簽頁(yè)時(shí),瀏覽器會(huì)觸發(fā)一個(gè) visibilitychange事件,告訴你用戶(hù)已經(jīng)看不到這個(gè)頁(yè)面了,切換到顯示狀態(tài)的時(shí)候也同樣。你可以給該事件注冊(cè)監(jiān)聽(tīng)函數(shù),在頁(yè)面的可見(jiàn)與不可見(jiàn)狀態(tài)進(jìn)行切換時(shí),執(zhí)行對(duì)應(yīng)的操作。

用處

該API一個(gè)很好的用處就是能夠在頁(yè)面切換到不可見(jiàn)狀態(tài)時(shí)暫停執(zhí)行一些不必要的操作,以減少資源的浪費(fèi)。

例子

在一個(gè)多標(biāo)簽的瀏覽器中,某個(gè)網(wǎng)頁(yè)所在的標(biāo)簽頁(yè)很有可能被切換到后臺(tái),這時(shí),該網(wǎng)頁(yè)是用戶(hù)不可見(jiàn)的。 一些網(wǎng)站很有可能希望在此時(shí)做出一些動(dòng)作。

比如:

1.某網(wǎng)站有個(gè)圖像幻燈片頁(yè)面,自動(dòng)播放圖片。如果該頁(yè)面被切換到了不可見(jiàn)狀態(tài),圖片的播放操作應(yīng)該暫停,直到該頁(yè)面重新對(duì)用戶(hù)可見(jiàn)時(shí),幻燈片才會(huì)繼續(xù)自動(dòng)播放。

2.某web應(yīng)用程序每隔一段時(shí)間會(huì)自動(dòng)訪(fǎng)問(wèn)服務(wù)器更新頁(yè)面內(nèi)的及時(shí)信息。在頁(yè)面不可見(jiàn)時(shí),應(yīng)該停止這種請(qǐng)求動(dòng)作。

3.某頁(yè)面想要檢測(cè)自己是否被預(yù)渲染,這樣可以獲得更準(zhǔn)確的頁(yè)面訪(fǎng)問(wèn)量。

在過(guò)去,開(kāi)發(fā)者使用一些不完善的手段間接的實(shí)現(xiàn)上述目的。例如通過(guò)使用onblur/onfocus事件,在當(dāng)前頁(yè)面失去焦點(diǎn)時(shí)得到通知。但這樣仍然無(wú)法檢測(cè)到正確的頁(yè)面可見(jiàn)性(失去焦點(diǎn)并不意味著不可見(jiàn),等等)。如今,頁(yè)面可見(jiàn)性API可以辦到了。

下面上個(gè)例子來(lái)實(shí)現(xiàn)：頁(yè)面不可見(jiàn)時(shí)播放中的視頻暫停，可見(jiàn)時(shí)視頻繼續(xù)播放

代碼：

<video id="video" autoplay="autoplay" loop="loop" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"></video>

<script>

var video = document.getElementById('video') ;

var Prefix = null;

getHidden();

//獲取當(dāng)前瀏覽器的hidden屬性

function getHidden(){

['webkit','ms','moz','o'].forEach(function(prefix){

if((prefix+'Hidden') in document){

Prefix = prefix;

}

});

if(Prefix == null){

alert('你的瀏覽器不支持Page Visibility API');

}

}

//為visibilitychange事件綁定處理程序

document.addEventListener(Prefix+'visibilitychange',handleVisibilityChange,false) ;

function handleVisibilityChange(){

switch (document.hidden){

//返回hidden = true，頁(yè)面不可見(jiàn)

case true: video.pause();break;

//返回hidden = false，頁(yè)面可見(jiàn)

case false:video.play();break;

}

}

</script>

DEMO地址，請(qǐng)點(diǎn)擊“閱讀原文”

總結(jié)

以上是生活随笔為你收集整理的HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。