首页 > Web开发 > 详细

js控制全屏显示

时间:2021-07-30 23:09:24      阅读:26      评论:0      收藏:0      [点我收藏+]
<button  id="fullBtn">点我全屏</button>
<iframe id="map" src="" style="width: 100%;height: 100%;"></iframe>

js

<script">
    var fullscreen = false;
    let btn = document.getElementById(‘fullBtn‘);
    let fullarea = document.getElementById(‘map‘)
    btn.addEventListener(‘click‘,function(){
        if (fullscreen) {    // 退出全屏
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {    // 进入全屏
            if (fullarea.requestFullscreen) {
                fullarea.requestFullscreen();
            } else if (fullarea.webkitRequestFullScreen) {
                fullarea.webkitRequestFullScreen();
            } else if (fullarea.mozRequestFullScreen) {
                fullarea.mozRequestFullScreen();
            } else if (fullarea.msRequestFullscreen) {
                // IE11
                fullarea.msRequestFullscreen();
            }
        }
        // fullscreen = !fullscreen;
    })
</script>

 

js控制全屏显示

原文:https://www.cnblogs.com/h-c-g/p/15080891.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!