在HTML5中，增加了2個與頁面顯示相關的API，分別是Page Visibility API與Fullscreen API; 作用分別如下：
Page Visibility API 是指當頁面變為最小化狀態或者使用者將瀏覽器標籤切換到其他標籤時會觸發。
Fullscreen API 是將頁面整體或頁面中某個區域性區域設為全屏。
Page Visibility API的使用場合如下：
- 一個應用程式中具有多幅圖片的幻燈片式的連續播放功能，當頁面變為不可見狀態(最小化狀態或者將使用者瀏覽器標籤切換到其他標籤時)，圖片停止播放，當頁面變為可見狀態時，圖片繼續播放。
- 在一個實時顯示伺服器端資訊的應用程式中，當頁面處於不可見狀態(最小化狀態或者將使用者瀏覽器標籤切換到其他標籤時)，停止定期向伺服器端請求資料的處理，當頁面變為可見狀態,繼續執行定期向伺服器端請求資料的處理。
- 在一個具有播放視訊功能的應用程式中，當頁面處於不可見狀態(最小化狀態或者將使用者瀏覽器標籤切換到其他標籤時)，暫停播放視訊，當頁面變為可見狀態時，繼續播放視訊。
瀏覽器支援程度：Firefox10+，chrome14+，IE10+；
實現Page Visibility API
在使用Page Visibility API時，我們首先需要判斷當前使用者所使用的瀏覽器以及該瀏覽器是否支援。程式碼如下判斷：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } |
如上，在Page Visibility API中，可以通過document物件的hidden屬性值來判斷頁面是否處於可見狀態，當頁面處於可見狀態時屬性值為false，當頁面處於不可見狀態時屬性值為true。
在Page Visibility中，可以通過document物件的visibilityState屬性值來判斷頁面的可見狀態。該屬性值為一個字串，其含義如下所示：
visible: 頁面內容部分可見，當前頁面位於使用者正在檢視的瀏覽器標籤視窗中，且瀏覽器視窗未被最小化。
hidden: 頁面內容對使用者不可見。當前頁面不在使用者正在檢視的瀏覽器標籤視窗中，或瀏覽器視窗已被最小化。
prerender: 頁面內容已被預渲染，但是對使用者不可見。
現在我們來看一個demo，頁面中有一個video元素與一個”播放”按鈕，使用者單擊”播放”按鈕時 按鈕文字變為 ’暫停”，同時開始播放video元素的視訊，當頁面變為最小化狀態或使用者瀏覽器標籤切換到其他標籤時候，視訊被暫停播放，當頁面恢復正常狀態或使用者將瀏覽器標籤切回頁面所在標籤時，視訊繼續播放。
HTML程式碼如下：
|
1 2 3 4 5 6 7 |
<video id="videoElement" controls width=640 height=360 autoplay> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="Wildlife/Wildlife.webm" type='video/webm' > <source src="Wildlife/Wildlife.mp4" type='video/mp4'> </video> <button id="btnPlay" onclick="PlayOrPause()">播放</button> <div style="height:1500px;"></div> |
JS程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
var hidden, visibilityChange, videoElement; if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(visibilityChange,handle,false); videoElement = document.getElementById("videoElement"); videoElement.addEventListener('ended',videoEnded,false); videoElement.addEventListener('play',videoPlay,false); videoElement.addEventListener('pause',videoPause,false); // 如果頁面變為不可見狀態 則暫停視訊播放 // 如果頁面變為可見狀態，則繼續視訊播放 function handle() { // 通過visibilityState屬性值判斷頁面的可見狀態 console.log(document.visibilityState); if(document[hidden]) { videoElement.pause(); }else { videoElement.play(); } } // 播放視訊 function play() { videoElement.play(); } // 暫停播放 function pause() { videoElement.pause(); } function PlayOrPause() { if(videoElement.paused) { videoElement.play(); }else { videoElement.pause(); } } function videoEnded(e) { videoElement.currentTime = 0; this.pause(); } function videoPlay(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "暫停"; } function videoPause(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "播放"; } |
實現Fullscreen API
在HTML5中，新增了一個Fullscreen API，其作用是將頁面整體或頁面中某個區域性區域設為全屏顯示狀態。
瀏覽器支援程度：Firefox10+，chrome16+，Safari5.1+
在Fullscreen API中，可以通過DOM物件的根節點物件或某個元素的requestFullscreen屬性值和執行相對應的方法來判斷瀏覽器是否支援Fullscreen API。程式碼如下：
|
1 2 3 4 5 6 7 8 |
var docElm = document.documentElement; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } |
在Fullscreen API中，也可以通過DOM物件或某個元素的exitFullscreen與CanvelFullScreen屬性和方法將當前頁面或某個元素設定為非全屏顯示狀態。
如下程式碼：
|
1 2 3 4 5 6 7 |
if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } |
在Fullscreen API中，可以通過監聽DOM物件或某個元素的fullscreenchange事件(當頁面或元素從非全屏顯示狀態變為全屏顯示狀態，或從全屏顯示狀態變為非全屏顯示狀態時觸發)。程式碼如下：
|
1 2 3 |
document.addEventListener('fullscreenchange',function(){},false); document.addEventListener('mozfullscreenchange',function(){},false); document.addEventListener('webkitfullscreenchange',function(){},false); |
在css樣式程式碼中，我們可以使用偽類選擇器來單獨指定處於全屏顯示狀態的頁面或元素樣式：
|
1 2 3 4 5 6 7 8 9 |
html:-moz-full-screen { background:red; } html:-webkit-full-screen { background:red; } html:fullscreen { background:red; } |
最後我們來看一個demo，在頁面中有一個按鈕，點選後，頁面會變成全屏狀態，再點選後，頁面會退出全屏；
HTML程式碼如下：
|
1 2 |
<input type="button" id="btnFullScreen" value="頁面全屏顯示" onclick="toggleFullScreen();"/> <div style="width:100%;" id="fullscreentState">非全屏顯示</div> |
Javascript如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var docElm = document.documentElement; var fullscreentState = document.getElementById("fullscreentState"); var btnFullScreen = document.getElementById("btnFullScreen"); fullscreentState.style.height = docElm.clientHeight + 'px'; document.addEventListener('fullscreenchange',function(){ fullscreentState.innerHTML = (document.fullscreen) ? "全屏顯示" : "非全屏顯示"; },false); document.addEventListener('mozfullscreenchange',function(){ fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏顯示" : "非全屏顯示"; },false); document.addEventListener('webkitfullscreenchange',function(){ fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏顯示" : "非全屏顯示"; },false); function toggleFullScreen() { if(btnFullScreen.value == '頁面全屏顯示') { btnFullScreen.value = '頁面非全屏顯示'; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }else { if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } btnFullScreen.value = "頁面全屏顯示"; } } |