div的全屏与退出全屏

最新推荐文章于 2024-08-16 10:39:59 发布

屈想顺

最新推荐文章于 2024-08-16 10:39:59 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： JavaScript div全屏

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html按钮：

<button  onclick="showFull();">全屏</button>
<button  onclick="delFull();">退出全屏</button>

js调用：

function showFull(){
    var full=document.getElementById("container");
    launchIntoFullscreen(full);
}

function delFull() {
     exitFullscreen();
}

全屏方法封装：

function launchIntoFullscreen(element) {
    if(element.requestFullscreen){
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

退出全屏方法封装：

function exitFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

参考链接：https://www.cnblogs.com/s313139232/p/8371548.html

参考链接：http://blog.sina.com.cn/s/blog_1458577430102xn4r.html