Fullscreen API 全屏顯示網頁

第一次看到應用 fullscreen api 全屏顯示網頁，是 facebook 中的**放大。作為乙個比較新的 api，目前只有 safari、chrome 和 firefox 三種瀏覽器支援該特性。因為尚未發布正式版的標準，所以必須使用瀏覽器特定的方法，也就是應用新增字首（webit/moz）的方法。

要對某個元素使用全屏特效，標準的流程是：

呼叫這個元素物件的requestfullscreen()方法；

瀏覽器將元素全屏顯示，改變相關的屬性值，然後觸發 document 的fullscreenchange事件；

退出全屏時有兩種方式，一種是預設的按esc鍵退出，一種是呼叫 document 的exitfullscreen()方法；

瀏覽器將元素退出全屏顯示，改變相關屬性值，再次觸發fullscreenchange方法。

瀏覽器在改變全屏狀態時修改的相關屬性，是指修改當前全屏狀態有否、全屏顯示的元素物件，這些屬性都是唯讀的。

瀏覽器觸發fullscreenchange事件，預設不做任何處理，內部的處理函式需要程式設計人員自行判斷當前全屏狀態後，進行相應處理。

對應的，規範中還新增了乙個:fullscreen偽類，對當前全屏的元素進行樣式定義。

fullscreen 目前只有兩個方法：進入全屏、退出全屏，三個屬性（全部是唯讀的）：是否支援全屏、當前全屏狀態、當前全屏元素，以及乙個在全屏狀態改變時觸發的事件（ using full-screen mode 中提到還有乙個fullscreenerror，但是我沒有測試出如何才能觸發這個事件）。與 w3 草案相比，firefox 的實現更符合標準，而 webkit 核心瀏覽器中的方法則要自我很多。

所有的方法和屬性中，只有requestfullscreen()是 element 物件的方法，其他全部是 document 物件所有的方法和屬性。

將 element 全屏顯示。webkit核心瀏覽器和firefox表現不同，前者只要求element是dom元素即可，後者則要求dom必須是文件流中的元素，比較嚴格，否則不能全屏顯示。

出於安全考慮，全屏狀態下預設是不允許使用者輸入的。webkit 核心瀏覽器會阻止除方向鍵、控制鍵之外的鍵盤輸入，firefox 會在輸入時發出要求使用者退出全屏狀態的提示。前者可以通過在方法webkitrequestfullscreen()中傳入引數element.llow_keyboard_input允許使用者輸入，但 safari 一旦傳入該引數，整個 fullscreen 功能都會壞掉（這應該是 safari 的乙個bug）；後者直接就可以輸入，除了有個煩人的提示。

webkit 瀏覽器中可以通過唯讀屬性document.webkitfullscreenkeyboardinputallowed檢視當前是否允許全屏狀態下的輸入。

/**
* 標準化 requestfullscreen 方法
* @param  elem 要全屏顯示的元素(webkit下只要是dom即可，firefox下必須是文件中的dom元素)
*/function
requestfullscreen
(elem
)elseif(
elem
.webkitrequestfullscreen
)// safari 瀏覽器中，如果方法內有引數，則 fullscreen 功能不可用。
else
}elseif(
elem
.mozrequestfullscreen
)}

從全屏狀態中退出。目前實現的方法都是cancelfullscreen(),而不是標準的exitfullscreen()。

/**
* 標準化 exitfullscreen 方法
*/function
exitfullscreen
()elseif(
document
.webkitcancelfullscreen
)elseif(
document
.mozcancelfullscreen
)}

通過該屬性的boolean值判斷瀏覽器是支援 fullscreen 功能。

webkit 核心的瀏覽器目前還沒有該屬性，因此只能通過能力判定來判斷是否支援全屏顯示功能。firefox 已經有了對應的屬性定義。

/* 標準化 fullscreenenabled 屬性 （唯讀） */
document
.fullscreenenabled=(
function
())();

當前全屏顯示的dom元素。

/** * 標準化 fullscreenelement 屬性（唯讀） * 以同名方法替代 */function fullscreenelement

()

該屬性並未在2012/6/3的 w3草案中出現，但在 using full-screen mode 一文中介紹了該屬性。其值為 boolean 型別，判斷當前文件的全屏狀態。

如果最終去掉這個判斷全屏狀態的屬性，我們仍然可以通過document.fullscreenelement的值是否為 null 來判斷全屏與否

/** * 標準化 fullscreen 屬性（唯讀） * 以同名方法替代 */function fullscreen

()

該事件要繫結在 document 上，該事件僅在全屏狀態改變時觸發，預設沒有任何動作。

/* 繫結 document 的 fullscreenchange 事件 */
document
.addeventlistener
('fullscreenchange'
,// webkitfullscreenchange/mozfullscreenchange
function
(evt
),false
);/* 如果使用 jquery ： */$(
document
).bind
('fullscreenchange webkitfullscreenchange mozfullscreenchange'
,function
());

標準中，通過:fullscreen偽類對全屏的元素進行樣式定義。

預設情況下，瀏覽器只會簡單地將元素設定為全屏顯示。如果該元素全屏後，高度比螢幕還高，超出的部分將會被隱藏。為了將超出部分可以滾動顯示，最頂層全屏顯示的元素要特別設定：

position
:fixed
;top:0
;left:0
;width
:100
%;height
:100
%;overflow
:auto
;

一般情況下，要全屏顯示的元素是不能像上面這樣設定的。那麼我們可以變通下，設定乙個，包圍要全屏的元素，然後將這個設定為全屏，上面的樣式定義就可以定義在這個上，相應的，:fullscreen將會作用在這個上。這樣，過長的元素就可以在這個包圍層內滾動顯示。

下面是實際中遇到的需要注意的地方：

fullscreen api 畢竟目前只是草案，尚未形成正式的標準，況且各個瀏覽器的實現情況也不完全相同，甚至細節上的實現差別更可能引發預想不到的問題。但作為漸進增強方式使用的新功能，能夠極大的增強使用者體驗。仍要根據規範的完善，不斷改進我們的**。

詳細**可以參考：

w3 草案 2012/6/3版

using full-screen mode

enhance your website with the fullscreen api

using the fullscreen api in web browsers

**參考 jquery fullscreen 外掛程式

Fullscreen API 全屏顯示網頁

Fullscreen API 全屏顯示網頁

Fullscreen API 全屏顯示網頁

全屏和退出全屏

相關推薦