「JavaScript 开发实例」前端页面全屏和退出全屏请求全屏：当某个元素（通常是<video>、<iframe>或整

🙏废话不多说系列，直接开整🙏

一、思路分析

请求全屏：当某个元素（通常是<video>、<iframe>或整个<body>）需要进入全屏模式时，可以调用该元素的requestFullscreen()方法。这个方法会尝试让元素进入全屏模式，但成功与否取决于用户的浏览器设置和是否由用户操作触发。
退出全屏：退出全屏通常有两种方式：一种是用户手动退出（例如按Esc键），另一种是编程方式通过调用document.exitFullscreen()方法。这个方法会尝试退出全屏模式，但也可能因为安全限制而失败。
全屏事件：为了处理全屏状态的变化，可以监听fullscreenchange事件。这个事件会在元素进入或退出全屏模式时触发。
实现效果展示：

二、实现方式

方式一：通过调用 document.exitFullscreen() 方法来实现

实现思路：

设置两个按钮：① 进入全屏；② 退出全屏；

分别对两个按钮增加点击触发事件，并设置监听是否全屏来相互切换。

完整示例源码如下：（🌸 方便大家全面理解熟悉🫶）

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Fullscreen Example</title>  
</head>  
<body>  
<button id="enterFullscreen">进入全屏</button>  
<button id="exitFullscreen">退出全屏</button>  
  
<script >

document.addEventListener('DOMContentLoaded', function() {  
    var enterBtn = document.getElementById('enterFullscreen');  
    var exitBtn = document.getElementById('exitFullscreen');  
  
    // 进入全屏  
    enterBtn.addEventListener('click', function() {  
        if (document.documentElement.requestFullscreen) {  
            document.documentElement.requestFullscreen();  
        } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */  
            document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */  
            document.documentElement.webkitRequestFullscreen();  
        } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */  
            document.documentElement.msRequestFullscreen();  
        }  
    });  
  
    // 退出全屏  
    exitBtn.addEventListener('click', function() {  
        if (document.exitFullscreen) {  
            document.exitFullscreen();  
        } else if (document.mozCancelFullScreen) { /* Firefox */  
            document.mozCancelFullScreen();  
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */  
            document.webkitExitFullscreen();  
        } else if (document.msExitFullscreen) { /* IE/Edge */  
            document.msExitFullscreen();  
        }  
    });  
  
    // 监听全屏状态变化  
    document.addEventListener('fullscreenchange', function() {  
        if (document.fullscreenElement) {  
            console.log('全屏模式已开启');  
        } else {  
            console.log('全屏模式已关闭');  
        }  
    });  
});

</script> 
</body>  
</html>

方式二：直接调用 window 按键的 F11设置全屏

原理：监听 window 对象识别到 F11 按键来控制是否全屏。

注意：记得不同浏览器的兼容性；

（2）设置全屏

// 全屏
function fullScreen() {
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; //typeof rfs != "undefined" && rfs
    if (rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") { //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

（3）退出全屏

//退出全屏
function exitScreen() {
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen; //typeof cfs != "undefined" && cfs
    if (cfs) {
        cfs.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") { //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

🙏至此，非常感谢阅读🙏