html5下F11全屏化的幾點注意

1、實現全屏化

var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}

2、退出全屏化

if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}

退出全屏化的問題來了，如果想用 ESC鍵 在退出全屏化的時候監聽這個事件，經測試在IE中是可以監聽到，firefox和chrome 中都無法監聽到。

為了達到監聽 ESC的效果，解決方案如下:

window.onresize = function(){
if(!checkFull()){
//要執行的動作
}
}

function checkFull(){
var isFull =  document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;

//to fix : false || undefined == undefined
if(isFull === undefined) isFull = false;
return isFull;
}

退出全屏化之后監控 window的resize事件，resize觸發之后最好取消掉這個監聽。