HTML5 全屏特性

標籤：

全屏功能是瀏覽器很早就支援的一項功能了，可以讓你頁面中的video, image ,div 等等子項目實現全屏瀏覽，從而帶來更好的視覺體驗，來看看怎麼使用吧。先來看看有哪些API和事件支援。

API

// 元素請求全螢幕顯示  element.requestFullscreen()// 檢測文檔的目前狀態是否允許執行全屏操作 document.fullscreenEnabled()//當前顯示的元素是否處於全屏狀態，如果處於，則返回為非Null 物件，否則返回nulldocument.fullscreenElement()//元素退出全螢幕顯示document.exitFullscreen()

上面除了RequestFullscreen()是支援element 對象以外，其他3個都只是支援document.

Event

fullscreenchange   // 全屏狀態更改時觸發fullscreenerror  //  執行全屏錯誤時觸發

由於每個瀏覽器實現的方式不一樣，所以我們實際的調用中還不能直接這樣寫，需要針對不同的瀏覽器做支援檢測，下面跟著詳細的例子看下具體相容代碼。

html

<body><img id="imgFS" src=""/><a id="btnFS" href="javascript:;"> FullScreen </a></body>

javascript

var fullScreen = document.getElementById(‘btnFS‘);fullScreen.addEventListener("click", function(){ var status = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullscreenEnabled || document.msFullscrrenEnabled; if (status) { var img = document.getElementById("imgFS"); if (img.requestFullscreen) { img.requestFullscreen(); } else if (img.msRequestFullscreen) { // IE img.msRequestFUllscreen(); } else if (img.mozRequestFullscreen) { // Firefox (Gecko) img.mozRequestFullscreen(); } else if (img.webkitRequestFullscreen) { // Webkit img.webkitRequestFullscreen(); } } else { alert("The document not allowed to fullscreen."); }});

以上代碼針對一個圖片元素進行了全屏操作的例子，上文中的全屏觸發是通過監聽一個按鈕來實現的，這個地方需要注意的是，假如你想在頁面載入後就觸發全屏，這個事件是不會觸發執行全螢幕顯示的。只有通過例如click, keydown等觸發事件，才可以啟用全螢幕顯示的功能。

監聽鍵盤按鈕觸發

下面的程式碼範例通過按鍵F12來觸發啟用或者關閉的操作，主要是利用了element.fullscreenElement 方法來判斷當前的文檔狀態，來進行切換的，具體代碼如下：

document.addEventListener("keydown", function(e){ console.log(e.keyCode); if (e.keyCode == 123) { // keypress fn + F12 for Mac fullscreen(); }});function fullscreen() { var body = document.body; var status = !document.fullscreenElement && // get the screen status !document.msFullscreenElement && !document.mozFullscreenElement && !document.webkitFullscreenElement; if (status) { if (body.requestFullscreen) { body.requestFullscreen(); } else if (body.mozRequestFullscreen) { body.mozRequestFullscreen(); } else if (body.webkitRequestFullscreen) { body.webkitRequestFullscreen(); } else if (body.msRequestFullscreen) { body.msRequestFUllscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozExitFullscreen) { document.mozExitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }}

全屏樣式

全屏效果下，可以啟用針對該狀態下的特定樣式，從而達到更好的瀏覽效果。樣式定義如下：

:-webkit-full-screen { // Webkit} :-moz-full-screen { // Gecko} :-ms-fullscreen { // IE} :fullscreen {}// 調用樣本#elementID :fullscreen { width:100%; height:100%;}:fullscreen::backdrop { // 背光}// 全屏背光，這是一個新的樣式屬性，但是目前瀏覽器支援的的都不太好， 在IE11中被支援，另外下面提到的Opera12.1,使用了:fullscreen-ancestor， 調用方法如下:-ms-fullscreen::-ms-backdrop { background-color: #000; }

在這個地方需要注意的是，Gecko和Webkit在全屏狀態下顯示是有差異的，Gecko會預設把指定的全屏元素進行width:100%;height:100%,而Webkit則是顯示一片黑色，所以這個地方就需要針對全屏的元素進行樣式調整了，參考以上程式碼範例。

瀏覽器安全色情況

參考地址：Caniuse

另外上面有說道下面幾個問題，可以注意下。

• IE11全屏狀態下是不允許滾動的
• IE11 並不允許通過keydown or pointerdown事件來觸發msRequestFullscreen()，keypress 和click沒有問題
• IE11對iframe中使用全屏支援的並不是很好
• 在全螢幕模式中Safari阻塞了keyboard事件（出於安全考慮），但是我上面代碼中，在Yosmite中，通過監聽F12，Safari是可以正常工作的
• Opera 12.1 使用老的標準:fullscreen-ancestor 偽類替代了 ::backdrop虛擬元素

總結

總之全屏是一個非常棒的特性，它可以讓我們的Web擁有像原生應用一樣體驗，在以後的項目中會多嘗試下這個特性。

本文參考

Using fullscreen mode

Fullscreen API Living Standard

How to Use the HTML5 Full-Screen API (Again)

HTML5 全屏特性