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

最新推荐文章于 2023-09-02 01:59:23 发布

wangyanlong0107

最新推荐文章于 2023-09-02 01:59:23 发布

阅读量104

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wangyanlong0107/article/details/84820511

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

【进入和退出全屏】

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