首页 > 代码库 > HTML5实现全屏API【进入和退出全屏】

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

2024-07-02 20:30:55   226人阅读

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

【进入和退出全屏】

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

 


联系
我们