全屏API可以控制瀏覽器的全屏顯示，讓一個Element節點（以及子節點）占滿用戶的整個屏幕。目前各大瀏覽器的最新版本都支持這個API（包括IE11），但是使用的時候需要加上瀏覽器前綴。 [TOC] ## 方法 ### requestFullscreen() Element節點的requestFullscreen方法，可以使得這個節點全屏。 ~~~ function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.msRequestFullscreen){ element.msRequestFullscreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } } launchFullscreen(document.documentElement); launchFullscreen(document.getElementById("videoElement")); ~~~ 放大一個節點時，Firefox和Chrome在行為上略有不同。Firefox自動為該節點增加一條CSS規則，將該元素放大至全屏狀態，`width: 100%; height: 100%`，而Chrome則是將該節點放在屏幕的中央，保持原來大小，其他部分變黑。為了讓Chrome的行為與Firefox保持一致，可以自定義一條CSS規則。 ~~~ :-webkit-full-screen #myvideo { width: 100%; height: 100%; } ~~~ ### exitFullscreen() document對象的exitFullscreen方法用于取消全屏。該方法也帶有瀏覽器前綴。 ~~~ function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } exitFullscreen(); ~~~ 用戶手動按下ESC鍵或F11鍵，也可以退出全屏鍵。此外，加載新的頁面，或者切換tab，或者從瀏覽器轉向其他應用（按下Alt-Tab），也會導致退出全屏狀態。 ## 屬性 ### document.fullscreenElement fullscreenElement屬性返回正處于全屏狀態的Element節點，如果當前沒有節點處于全屏狀態，則返回null。 ~~~ var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; ~~~ ### document.fullscreenEnabled fullscreenEnabled屬性返回一個布爾值，表示當前文檔是否可以切換到全屏狀態。 ~~~ var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; if (fullscreenEnabled) { videoElement.requestFullScreen(); } else { console.log('瀏覽器當前不能全屏'); } ~~~ ## 全屏事件 以下事件與全屏操作有關。 * fullscreenchange事件：瀏覽器進入或離開全屏時觸發。 * fullscreenerror事件：瀏覽器無法進入全屏時觸發，可能是技術原因，也可能是用戶拒絕。 ~~~ document.addEventListener("fullscreenchange", function( event ) { if (document.fullscreenElement) { console.log('進入全屏'); } else { console.log('退出全屏'); } }); ~~~ 上面代碼在發生fullscreenchange事件時，通過fullscreenElement屬性判斷，到底是進入全屏還是退出全屏。 ## 全屏狀態的CSS 全屏狀態下，大多數瀏覽器的CSS支持`:full-screen`偽類，只有IE11支持`:fullscreen`偽類。使用這個偽類，可以對全屏狀態設置單獨的CSS屬性。 ~~~ :-webkit-full-screen { /* properties */ } :-moz-full-screen { /* properties */ } :-ms-fullscreen { /* properties */ } :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */ :-webkit-full-screen video { width: 100%; height: 100%; } ~~~ ## 參考鏈接 * David Walsh,?[Fullscreen API](http://davidwalsh.name/fullscreen) * David Storey,?[Is your Fullscreen API code up to date? Find out how to make it work the same in modern browsers](http://generatedcontent.org/post/70347573294/is-your-fullscreen-api-code-up-to-date-find-out-how-to)