HTML5实现全屏API【进入和退出全屏】

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

【进入和退出全屏】

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
 
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
 
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

 

//进入全屏

 function requestFullScreen() {
     var de = document.documentElement;
     if (de.requestFullscreen) {
         de.requestFullscreen();
     } else if (de.mozRequestFullScreen) {
         de.mozRequestFullScreen();
     } else if (de.webkitRequestFullScreen) {
         de.webkitRequestFullScreen();
     }
 }
 //退出全屏
 function exitFullscreen() {
     var de = document;
     if (de.exitFullscreen) {
         de.exitFullscreen();
     } else if (de.mozCancelFullScreen) {
         de.mozCancelFullScreen();
     } else if (de.webkitCancelFullScreen) {
         de.webkitCancelFullScreen();
     }
 }

//调用
document.body.addEventListener('click',function(){
    requestFullScreen();
    //5秒钟自动退出全屏
    setTimeout(function(){
        exitFullscreen();
    },5000);

},false);

检查全屏状态变化 Detecting fullscreen state change
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);


css的全屏样式 Styling fullscreen
在css中，我们有几个伪类来给全屏设置样式，一般是 full-screen 这个伪类，然后会自动再全屏的时候生效

html:-moz-full-screen {
background: red;
}

html:-webkit-full-screen {
background: red;
}

html:fullscreen {
background: red;
}

全屏状态下的键盘输入 Full screen with key input
 为了安全原因，很多情况下全屏输入都是被阻塞禁止的，但是chrome允许通过下面的API来允许键盘输入
 docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  

这个只在chrome支持，其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入，但是会触发用户通知已保证安全。
 
firefox10以上，chrome 15和safari5.1以上都支持了。
 
这是一个demo的地址：http://robnyman.github.io/fullscreen/，还有一个github示例代码：https://github.com/robnyman/robnyman.github.com/tree/master/fullscreen