JS实现全屏事件fullscreenchange 实现全屏、退出全屏操作

最新推荐文章于 2024-05-09 09:36:38 发布

FF_Chen

最新推荐文章于 2024-05-09 09:36:38 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： javascript js

本文链接：https://blog.csdn.net/ff_chen/article/details/108040738

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考：https://www.jb51.net/article/170208.htm

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#content:-webkit-full-screen {
    background-color: rgb(255, 255, 12);
}
#btn{
    position: absolute;top: 0;left: 0;height: 50px;
}
</style>

<body>
    <div style="margin:0 auto;height:600px;width:700px;" id="qp">
        <button id="btn">开启/关闭全屏</button>
        <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;">
            <h1>js控制页面的全屏展示和退出全屏显示</h1>
        </div>
    </div>
</body>


<script language="JavaScript">
var flag = true;
document.getElementById("btn").onclick = function() {
    var elem = document.getElementById("qp");
    if(flag) {
        launchFullscreen(elem)
        flag = false
    }else{
        exitFullscreen()
        flag = true
    }
};


// 进入全屏
function launchFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()
    }
}

// 退出全屏

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


</script>

</html>

FF_Chen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现全屏事件fullscreenchange 实现全屏、退出全屏操作

参考：https://www.jb51.net/article/170208.htm<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#content:-webkit-full-screen { background-color: rgb(255, 255, 12);}#btn{ position:
复制链接

扫一扫

专栏目录