DOM全屏Api requestFullscreen

設定全屏

/**
* [requestFullScreen 設定全屏]
*/
function requestFullScreen(id) {
	var de = document.getElementById(id);
	if (de.requestFullscreen) {
		de.requestFullscreen();
	} else if (de.mozRequestFullScreen) {
		de.mozRequestFullScreen();
	} else if (de.webkitRequestFullScreen) {
		de.webkitRequestFullScreen();
	}
}           

退出全屏

/**
* [exitFullscreen 退出全屏]
*/
function exitFullscreen(id) {
	var de = document.getElementById(id);
	if (de.exitFullscreen) {
		de.exitFullscreen();
	} else if (de.mozCancelFullScreen) {
		de.mozCancelFullScreen();
	} else if (de.webkitCancelFullScreen) {
		de.webkitCancelFullScreen();
	}
}           

屬性

fullscreenElement

var fullscreenElement = document.fullscreenElement    ||
                                document.mozFullScreenElement ||
                                document.webkitFullscreenElement;
           

fullscreenElement屬性傳回正處于全屏狀态的Element節點，如果目前沒有節點處于全屏狀态，則傳回null

fullscreenEnabled

var fullscreenEnabled = document.fullscreenEnabled       ||
                                document.mozFullScreenEnabled    ||
                                document.webkitFullscreenEnabled ||
                                document.msFullscreenEnabled;
 
        if (fullscreenEnabled) {
            setFullscreen();
        } else {
            console.log('浏覽器目前不能全屏');
        }           

fullscreenEnabled屬性傳回一個布爾值，表示目前文檔是否可以切換到全屏狀态。

判斷全屏

fullscreenchange //  浏覽器進入或離開全屏時觸發。

document.addEventListener('fullscreenchange', function(){});
 
document.addEventListener('webkitfullscreenchange', function(){});
 
document.addEventListener('mozfullscreenchange', function(){});
 
document.addEventListener('MSFullscreenChange', function(){});           

fullscreenerror //  浏覽器無法進入全屏時觸發，可能是技術原因，也可能是使用者拒絕

document.addEventListener('fullscreenerror', function(){});
 
document.addEventListener('webkitfullscreenerror', function(){});
 
document.addEventListener('mozfullscreenerror', function(){});
 
document.addEventListener('MSFullscreenError', function(){});           

全屏狀态下的CSS

:-webkit-full-screen {
     /* properties */
}
 
:-moz-full-screen {
     /* properties */
}
 
:-ms-fullscreen {
     /* properties */
}
 
:full-screen { /*pre-spec */
     /* properties */
}
 
:fullscreen { /* spec */
     /* properties */
}
 
/* deeper elements */
video:-webkit-full-screen {
     width: 100%;
     height: 100%;
}           

全屏狀态下，大多數浏覽器的CSS支援:full-screen僞類，隻有IE11支援:fullscreen僞類。使用這個僞類，可以對全屏狀态設定單獨的CSS屬性。