JS设置页面点击全屏显示、退出全屏显示

<div class="">
        <div class="***" id="fullScreen" onclick="handleFullScreen()">
            <img src="../../*******" alt="" style="width: 20px;height: 20px;">
            <span>全屏</span>
        </div>
        <div class="***" id="ExitfullScreen" onclick="exitFullscreen()" style="display: none">
            <img src="../../*******" alt="" style="width: 20px;height: 20px;">
            <span>退出全屏</span>
            </div>
        <div class="***" id="close" onclick="">
            <img src="../../*******" alt="" style="width: 20px;height: 20px;">
            <span>关闭</span>
        </div>
</div>
 /**
     * 设置页面点击全屏、点击退出全屏
     * **/
    //定义一个变量进行判断,默认false 非全屏状态
    var exitFullscreen = false
    // 点击全屏
    function handleFullScreen() {
        var element = document.documentElement;
        if(this.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(element.requestFullscreen) {
                element.requestFullscreen();
            } else if(element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if(element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        }
    }
    // 点击退出全屏
    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();
        }
    }

    //监听window是否全屏,并进行相应的操作,支持esc键退出
    window.onresize = function() {
        //这样写也是对的
        // const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement

        const isFullScreen = document.fullscreenElement
        if (isFullScreen) {
            $("#ExitfullScreen").css("display","flex");
            $("#fullScreen").css("display","none");
            console.log('进入全屏')
        } else {
            $("#ExitfullScreen").css("display","none");
            $("#fullScreen").css("display","flex");
            console.log('退出全屏')
        }

    }


猜你喜欢

转载自blog.csdn.net/qq_45609680/article/details/130263891