?
This document uses PHP Chinese website manual Release
全屏API可以控制瀏覽器的全屏顯示，讓一個Element節(jié)點(diǎn)（以及子節(jié)點(diǎn)）占滿用戶的整個屏幕。目前各大瀏覽器的最新版本都支持這個API（包括IE11），但是使用的時候需要加上瀏覽器前綴。
方法
requestFullscreen()
exitFullscreen()
屬性
document.fullscreenElement
document.fullscreenEnabled
全屏事件
全屏狀態(tài)的CSS
參考鏈接
方法
requestFullscreen()
Element節(jié)點(diǎn)的requestFullscreen方法，可以使得這個節(jié)點(diǎn)全屏。
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"));
放大一個節(jié)點(diǎn)時，F(xiàn)irefox和Chrome在行為上略有不同。Firefox自動為該節(jié)點(diǎn)增加一條CSS規(guī)則，將該元素放大至全屏狀態(tài)，width: 100%; height: 100%，而Chrome則是將該節(jié)點(diǎn)放在屏幕的中央，保持原來大小，其他部分變黑。為了讓Chrome的行為與Firefox保持一致，可以自定義一條CSS規(guī)則。
:-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，或者從瀏覽器轉(zhuǎn)向其他應(yīng)用（按下Alt-Tab），也會導(dǎo)致退出全屏狀態(tài)。
屬性
document.fullscreenElement
fullscreenElement屬性返回正處于全屏狀態(tài)的Element節(jié)點(diǎn)，如果當(dāng)前沒有節(jié)點(diǎn)處于全屏狀態(tài)，則返回null。
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
document.fullscreenEnabled
fullscreenEnabled屬性返回一個布爾值，表示當(dāng)前文檔是否可以切換到全屏狀態(tài)。
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
videoElement.requestFullScreen();
} else {
console.log('瀏覽器當(dāng)前不能全屏');
}
全屏事件
以下事件與全屏操作有關(guān)。
fullscreenchange事件：瀏覽器進(jìn)入或離開全屏?xí)r觸發(fā)。
fullscreenerror事件：瀏覽器無法進(jìn)入全屏?xí)r觸發(fā)，可能是技術(shù)原因，也可能是用戶拒絕。
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('進(jìn)入全屏');
} else {
console.log('退出全屏');
}
});
上面代碼在發(fā)生fullscreenchange事件時，通過fullscreenElement屬性判斷，到底是進(jìn)入全屏還是退出全屏。
全屏狀態(tài)的CSS
全屏狀態(tài)下，大多數(shù)瀏覽器的CSS支持:full-screen偽類，只有IE11支持:fullscreen偽類。使用這個偽類，可以對全屏狀態(tài)設(shè)置單獨(dú)的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