Html5实现全屏和退出全屏展示

[LiShuang1997]

【进入和退出全屏】

// 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);