div标签的全屏和退出全屏

司徒小北

已于 2022-04-18 17:23:22 修改

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

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

于 2019-08-06 17:11:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42333548/article/details/98634502

JavaScript 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和Vue.js为DOM元素添加全屏功能。通过实例展示了按钮触发全屏及退出全屏的方法，包括跨浏览器兼容性的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、dom元素添加事件


<div id="contain"></div>

JavaScript：
<button  οnclick="showFullScreen()">dom全屏</button>
<button  οnclick="exitFullScreen()">退出全屏</button>

vue:
<button  @click="showFullScreen()">全屏</button>
<button  @click="exitFullScreen()">退出全屏</button>

2、获取当前元素进行dom全屏操作

function showFullScreen(){
    var full=document.getElementById("contain");
    launchIntoFullscreen(full);
}
 
function exitFullScreen() {
     exitFullscreen();
}

3、标签全屏和退出全屏方法封装

//div标签全屏方法
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();
    }
}

//退出div标签全屏方法
function exitFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

交流

共同进阶学习