html5下F11全屏化的几点注意

一、实现全屏化

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();
}

二、退出全屏化

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触发以后最好取消掉这个监听。