标签：style blog class code java color
现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：
【进入和退出全屏】
// Webkit (works in Safari5.1 and Chrome
15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
//
Firefox
10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
//
W3C
提议
element.requestFullscreen();
document.exitFullscreen();
【兼容解决方案】
1 //进入全屏 2 function requestFullScreen() { 3 var de = document.documentElement; 4 if (de.requestFullscreen) { 5 de.requestFullscreen(); 6 } else if (de.mozRequestFullScreen) { 7 de.mozRequestFullScreen(); 8 } else if (de.webkitRequestFullScreen) { 9 de.webkitRequestFullScreen(); 10 } 11 } 12 //退出全屏 13 function exitFullscreen() { 14 var de = document; 15 if (de.exitFullscreen) { 16 de.exitFullscreen(); 17 } else if (de.mozCancelFullScreen) { 18 de.mozCancelFullScreen(); 19 } else if (de.webkitCancelFullScreen) { 20 de.webkitCancelFullScreen(); 21 } 22 }
注：可能出于安全考虑，只能手动触发才能实现全屏，浏览器自动执行无效果。
【实例】
document.body.addEventListener(‘click‘,function(){ requestFullScreen(); //5秒钟自动退出全屏 setTimeout(function(){ exitFullscreen(); },5000); },false);
HTML5实现全屏API【进入和退出全屏】,布布扣,bubuko.com
标签：style blog class code java color
原文地址：http://www.cnblogs.com/kingwell/p/3706352.html
