資訊專欄INFORMATION COLUMN
摘要：進(jìn)入全屏將全屏顯示。內(nèi)核瀏覽器和表現(xiàn)不同，前者只要求是元素即可，后者則要求必須是文檔流中的元素，比較嚴(yán)格，否則不能全屏顯示。內(nèi)核瀏覽器會(huì)阻止除方向鍵控制鍵之外的鍵盤輸入，會(huì)在輸入時(shí)發(fā)出要求用戶退出全屏狀態(tài)的提示。
1. 標(biāo)準(zhǔn)調(diào)用方式第一次看到應(yīng)用 Fullscreen API 全屏顯示網(wǎng)頁，是 FaceBook 中的照片放大。作為一個(gè)比較新的 API，目前只有 Safari、Chrome 和 FireFox 三種瀏覽器支持該特性。因?yàn)樯形窗l(fā)布正式版的標(biāo)準(zhǔn)，所以必須使用瀏覽器特定的方法，也就是應(yīng)用添加前綴（webit/moz）的方法。
這個(gè) API 不僅能夠使整個(gè)頁面全屏顯示，也可以使頁面中的某個(gè)元素全屏顯示。它的設(shè)計(jì)初衷是為了全屏顯示 HTML5 視頻和游戲，以便更全面的替代 flash 功能。盡管還有很多有待完善的地方，但是作為一個(gè)新的瀏覽器特性，在某些地方還是能夠極大地增強(qiáng)用戶體驗(yàn)。
要對(duì)某個(gè)元素使用全屏特效，標(biāo)準(zhǔn)的流程是：
調(diào)用這個(gè)元素對(duì)象的 requestFullscreen() 方法；
瀏覽器將元素全屏顯示，改變相關(guān)的屬性值，然后觸發(fā) document 的 fullscreenchange 事件；
退出全屏?xí)r有兩種方式，一種是默認(rèn)的按 ESC 鍵退出，一種是調(diào)用 document 的 exitFullscreen() 方法；
瀏覽器將元素退出全屏顯示，改變相關(guān)屬性值，再次觸發(fā) fullscreenchange 方法。
瀏覽器在改變?nèi)翣顟B(tài)時(shí)修改的相關(guān)屬性，是指修改當(dāng)前全屏狀態(tài)有否、全屏顯示的元素對(duì)象，這些屬性都是只讀的。
瀏覽器觸發(fā) fullscreenchange 事件，默認(rèn)不做任何處理，內(nèi)部的處理函數(shù)需要編程人員自行判斷當(dāng)前全屏狀態(tài)后，進(jìn)行相應(yīng)處理。
對(duì)應(yīng)的，規(guī)范中還添加了一個(gè) :fullscreen 偽類，對(duì)當(dāng)前全屏的元素進(jìn)行樣式定義。
Fullscreen 目前只有兩個(gè)方法：進(jìn)入全屏、退出全屏，三個(gè)屬性（全部是只讀的）：是否支持全屏、當(dāng)前全屏狀態(tài)、當(dāng)前全屏元素，以及一個(gè)在全屏狀態(tài)改變時(shí)觸發(fā)的事件（ Using full-screen mode 中提到還有一個(gè) fullscreenerror，但是我沒有測試出如何才能觸發(fā)這個(gè)事件 ）。與 W3 草案 相比，F(xiàn)ireFox 的實(shí)現(xiàn)更符合標(biāo)準(zhǔn)，而 webkit 內(nèi)核瀏覽器中的方法則要自我很多。
所有的方法和屬性中，只有 requestFullscreen() 是 element 對(duì)象的方法，其他全部是 document 對(duì)象所有的方法和屬性。
2.1 進(jìn)入全屏：element.requestFullscreen()
將 element 全屏顯示。webkit內(nèi)核瀏覽器和Firefox表現(xiàn)不同，前者只要求element是DOM元素即可，后者則要求DOM必須是文檔流中的元素，比較嚴(yán)格，否則不能全屏顯示。
出于安全考慮，全屏狀態(tài)下默認(rèn)是不允許用戶輸入的。webkit 內(nèi)核瀏覽器會(huì)阻止除方向鍵、控制鍵之外的鍵盤輸入，F(xiàn)ireFox 會(huì)在輸入時(shí)發(fā)出要求用戶退出全屏狀態(tài)的提示。前者可以通過在方法 webkitRequestFullScreen() 中傳入?yún)?shù) Element.LLOW_KEYBOARD_INPUT 允許用戶輸入，但 Safari 一旦傳入該參數(shù)，整個(gè) Fullscreen 功能都會(huì)壞掉（這應(yīng)該是 Safari 的一個(gè)bug）；后者直接就可以輸入，除了有個(gè)煩人的提示。
webkit 瀏覽器中可以通過只讀屬性 document.webkitFullScreenKeyboardInputAllowed 查看當(dāng)前是否允許全屏狀態(tài)下的輸入。
/**
* 標(biāo)準(zhǔn)化 requestFullscreen 方法
* @param {DOM} elem 要全屏顯示的元素(webkit下只要是DOM即可，F(xiàn)irefox下必須是文檔中的DOM元素)
*/
function requestFullscreen( elem ) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
else if (elem.webkitRequestFullScreen) {
// 對(duì) Chrome 特殊處理，
// 參數(shù) Element.ALLOW_KEYBOARD_INPUT 使全屏狀態(tài)中可以鍵盤輸入。
if ( window.navigator.userAgent.toUpperCase().indexOf( "CHROME" ) >= 0 ) {
elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
}
// Safari 瀏覽器中，如果方法內(nèi)有參數(shù)，則 Fullscreen 功能不可用。
else {
elem.webkitRequestFullScreen();
}
}
else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
}
}
2.2 退出全屏：document.exitFullscreen()
從全屏狀態(tài)中退出。目前實(shí)現(xiàn)的方法都是 cancelFullScreen() ,而不是標(biāo)準(zhǔn)的 exitFullscreen()。
/**
* 標(biāo)準(zhǔn)化 exitFullscreen 方法
*/
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
2.3 瀏覽器是否支持全屏：document.fullscreenEnabled
通過該屬性的boolean值判斷瀏覽器是支持 Fullscreen 功能。
webkit 內(nèi)核的瀏覽器目前還沒有該屬性，因此只能通過能力判定來判斷是否支持全屏顯示功能。Firefox 已經(jīng)有了對(duì)應(yīng)的屬性定義。
/* 標(biāo)準(zhǔn)化 fullscreenEnabled 屬性 （只讀） */
document.fullscreenEnabled = ( function() {
var doc = document.documentElement;
return ( "requestFullscreen" in doc ) ||
( "webkitRequestFullScreen" in doc ) ||
// 對(duì)Firefox除了能力判斷，還加上了屬性判斷
( "mozRequestFullScreen" in doc && document.mozFullScreenEnabled ) ||
false;
} )();
2.4 ：document.fullscreenElement
當(dāng)前全屏顯示的DOM元素。
/**
* 標(biāo)準(zhǔn)化 fullscreenElement 屬性 （只讀）
* 以同名方法替代
*/
function fullscreenElement() {
return document.fullscreenElement ||
document.webkitCurrentFullScreenElement ||
document.mozFullScreenElement ||
null;
}
2.5 當(dāng)前全屏狀態(tài)：document.fullscreen
該屬性并未在2012/6/3的 w3草案 中出現(xiàn)，但在Using full-screen mode 一文中介紹了該屬性。其值為 boolean 類型，判斷當(dāng)前文檔的全屏狀態(tài)。
如果最終去掉這個(gè)判斷全屏狀態(tài)的屬性，我們?nèi)匀豢梢酝ㄟ^ document.fullscreenElement 的值是否為 null 來判斷全屏與否
/**
* 標(biāo)準(zhǔn)化 fullscreen 屬性 （只讀）
* 以同名方法替代
*/
function fullscreen() {
return document.fullscreen ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
false;
}
2.6 全屏狀態(tài)改變事件：fullscreenchange
該事件要綁定在 document 上，該事件僅在全屏狀態(tài)改變時(shí)觸發(fā)，默認(rèn)沒有任何動(dòng)作。
/* 綁定 document 的 fullscreenchange 事件 */
document.addEventListener(
"fullscreenchange", // webkitfullscreenchange/mozfullscreenchange
function( evt ){
//todo 全屏狀態(tài)改變時(shí)的時(shí)間處理。
//默認(rèn)不會(huì)有任何處理，需要自己判斷當(dāng)前屏幕全屏與否，做出相應(yīng)處理。
},
false
);
/* 如果使用 jQuery ： */
$( document ).bind(
"fullscreenchange webkitfullscreenchange mozfullscreenchange",
function(){
//todo code
}
);
3. 全屏樣式設(shè)置
標(biāo)準(zhǔn)中，通過 :fullscreen 偽類對(duì)全屏的元素進(jìn)行樣式定義。
默認(rèn)情況下，瀏覽器只會(huì)簡單地將元素設(shè)置為全屏顯示。如果該元素全屏后，高度比屏幕還高，超出的部分將會(huì)被隱藏。為了將超出部分可以滾動(dòng)顯示，最頂層全屏顯示的元素要特別設(shè)置：
position : fixed; top : 0; left : 0; width : 100%; height : 100%; overflow : auto;
一般情況下，要全屏顯示的元素是不能像上面這樣設(shè)置的。那么我們可以變通下，設(shè)置一個(gè)
，包圍要全屏的元素，然后將這個(gè) 設(shè)置為全屏，上面的樣式定義就可以定義在這個(gè) 上，相應(yīng)的，:fullscreen 將會(huì)作用在這個(gè) 上。這樣，過長的元素就可以在這個(gè)包圍層內(nèi)滾動(dòng)顯示。 4. 特別注意目前 FireFox 10、Safari 5.1+、Chrome 15+ 支持全屏
可以使任意元素全屏顯示，不只是整個(gè)頁面
全屏只能從事件觸發(fā)（用戶操作），而不能用代碼直接觸發(fā)
全屏狀態(tài)下，webkit 內(nèi)核瀏覽器默認(rèn)會(huì)阻止除方向鍵、控制鍵之外的鍵盤輸入，F(xiàn)ireFox 會(huì)在輸入時(shí)發(fā)出退出全屏狀態(tài)提示。處理方法在 封裝API 部分有說明。
下面是實(shí)際中遇到的需要注意的地方：
全屏狀態(tài)切換需要時(shí)間。執(zhí)行 requestFullscreen() 后，并不會(huì)立即進(jìn)入全屏狀態(tài)，對(duì)應(yīng)的全屏屬性不會(huì)立即更改，而是有一個(gè)執(zhí)行時(shí)間。因此，只能在 fullscreenchange 事件觸發(fā)后才代表進(jìn)入了全屏狀態(tài)。但是在 fullscreenchange 事件中調(diào)用 $(window).width() 并不總能得到全屏的尺寸，這個(gè)現(xiàn)象很奇怪。如果需要屏幕尺寸，可以通過 window.screen.width 來獲得。
涉及修改DOM文檔須注意代碼位置。當(dāng)用
包圍要全屏顯示的元素時(shí)，這段 javascript 代碼不應(yīng)該在要全屏顯示的元素內(nèi)部，否則這段代碼會(huì)被執(zhí)行兩遍，而且第二遍不會(huì)在斷點(diǎn)中被監(jiān)視到，原因?qū)⒃诤笪脑敿?xì)描述。ESC 鍵不同系統(tǒng)功能不同。目前發(fā)現(xiàn)點(diǎn)擊 ESC 退出全屏?xí)r，mac系統(tǒng)不會(huì)再額外觸發(fā)鍵盤事件，但是win7系統(tǒng)下出發(fā) fullscreenchange 事件后還會(huì)立馬觸發(fā)鍵盤事件，因此如果還有不希望被觸發(fā)的鍵盤事件，可以設(shè)置一個(gè)監(jiān)視變量，在很短時(shí)間后再修改監(jiān)視變量，以錯(cuò)過這個(gè)立馬執(zhí)行的時(shí)間。
5. 未涉及功能iframe 元素的 allowfullscreen 屬性
::backdrop 偽類
具體其他細(xì)節(jié)可以參考 W3 草案
6. 結(jié)語參考Fullscreen API 畢竟目前只是草案，尚未形成正式的標(biāo)準(zhǔn)，況且各個(gè)瀏覽器的實(shí)現(xiàn)情況也不完全相同，甚至細(xì)節(jié)上的實(shí)現(xiàn)差別更可能引發(fā)預(yù)想不到的問題。但作為漸進(jìn)增強(qiáng)方式使用的新功能，能夠極大的增強(qiáng)用戶體驗(yàn)。仍要根據(jù)規(guī)范的完善，不斷改進(jìn)我們的代碼。
詳細(xì)代碼可以參考：https://github.com/calefy/calefy.github.com/blob/master/js/Fullscreen.js
W3 草案 2012/6/3版
Using full-screen mode
Enhance Your Website with the FullScreen API
Using the Fullscreen API in web browsers
代碼參考 jQuery Fullscreen 插件
本文參考
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79734.html
摘要：進(jìn)入全屏將全屏顯示。內(nèi)核瀏覽器和表現(xiàn)不同，前者只要求是元素即可，后者則要求必須是文檔流中的元素，比較嚴(yán)格，否則不能全屏顯示。內(nèi)核瀏覽器會(huì)阻止除方向鍵控制鍵之外的鍵盤輸入，會(huì)在輸入時(shí)發(fā)出要求用戶退出全屏狀態(tài)的提示。 第一次看到應(yīng)用 Fullscreen API 全屏顯示網(wǎng)頁，是 FaceBook 中的照片放大。作為一個(gè)比較新的 API，目前只有 Safari、Chrome 和 FireF...
摘要：進(jìn)入全屏將全屏顯示。內(nèi)核瀏覽器和表現(xiàn)不同，前者只要求是元素即可，后者則要求必須是文檔流中的元素，比較嚴(yán)格，否則不能全屏顯示。內(nèi)核瀏覽器會(huì)阻止除方向鍵控制鍵之外的鍵盤輸入，會(huì)在輸入時(shí)發(fā)出要求用戶退出全屏狀態(tài)的提示。 第一次看到應(yīng)用 Fullscreen API 全屏顯示網(wǎng)頁，是 FaceBook 中的照片放大。作為一個(gè)比較新的 API，目前只有 Safari、Chrome 和 FireF...
摘要：推薦這么做，因?yàn)槿绻總€(gè)都要這樣重復(fù)的判斷瀏覽器前綴，那也太惡心了瀏覽器是否支持全屏模式屬性返回一個(gè)布爾值，表示當(dāng)前文檔是否可以切換到全屏狀態(tài)。 showImg(https://segmentfault.com/img/remote/1460000017229080?w=700&h=467); 我第一次對(duì)網(wǎng)頁全屏模式有概念，是那種網(wǎng)頁播放視頻的全屏播 放的那種。感覺很強(qiáng)，前幾個(gè)星期有個(gè)...
閱讀 3827·2021-11-25 09:43
閱讀 2170·2021-11-23 10:11
閱讀 1397·2021-09-29 09:35
閱讀 1310·2021-09-24 10:31
閱讀 2035·2019-08-30 15:48
閱讀 2353·2019-08-29 15:28
閱讀 425·2019-08-29 12:36
閱讀 3490·2019-08-28 18:12
