如何用js写退出全屏的代码

要用JavaScript实现退出全屏模式，可以使用document.exitFullscreen()方法、确保浏览器兼容性、注意用户交互触发。 详细描述一下，使用JavaScript退出全屏模式非常简单，但要确保在调用该方法时满足浏览器的安全限制，例如必须在用户交互事件（如点击或键盘事件）中调用。

一、基本概念

JavaScript提供了一系列API来控制浏览器的全屏模式。这些API可以让你进入全屏模式或退出全屏模式，以提高用户体验。例如，在视频播放应用中，用户可能希望能轻松切换全屏模式。

1、进入全屏模式

在进入全屏模式时，可以使用element.requestFullscreen()方法。这个方法允许你将特定的HTML元素（如视频播放器或整个页面）切换到全屏模式。

function enterFullscreen() {
    var elem = document.documentElement; // 获取HTML文档的根元素
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { // Firefox
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { // IE/Edge
        elem.msRequestFullscreen();
    }
}

2、退出全屏模式

退出全屏模式则使用document.exitFullscreen()方法。这个方法将使页面退出全屏模式，恢复到普通视图。

function exitFullscreen() {
    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();
    }
}

二、跨浏览器兼容性

不同浏览器对全屏API的支持有所不同。因此，为了确保代码在所有浏览器中都能正常运行，需要进行一些兼容性处理。

1、兼容性处理

如上面代码所示，使用不同的前缀来处理不同浏览器的兼容性问题。对于进入全屏模式和退出全屏模式的代码，都需要进行类似的处理。

function toggleFullscreen() {
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
        enterFullscreen();
    } else {
        exitFullscreen();
    }
}

三、用户交互

大多数浏览器要求全屏API必须在用户交互事件中调用，例如点击按钮或按键事件。这是为了防止恶意脚本自动切换全屏模式，影响用户体验。

1、示例代码

以下是一个结合用户交互事件的完整示例：

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen Example</title>
</head>
<body>
    <button id="fullscreen-btn">Toggle Fullscreen</button>
    <script>
        document.getElementById("fullscreen-btn").addEventListener("click", function() {
            toggleFullscreen();
        });
        function enterFullscreen() {
            var elem = document.documentElement;
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) { // Firefox
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { // IE/Edge
                elem.msRequestFullscreen();
            }
        }
        function exitFullscreen() {
            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();
            }
        }
        function toggleFullscreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
                enterFullscreen();
            } else {
                exitFullscreen();
            }
        }
    </script>
</body>
</html>

四、附加功能

在一些应用中，可能需要监听全屏模式的变化。例如，当用户按下ESC键退出全屏模式时，你可能希望在页面上进行一些额外的处理。

1、监听全屏变化

可以使用fullscreenchange事件来监听全屏模式的变化。

document.addEventListener("fullscreenchange", function() {
    if (document.fullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});

2、示例代码

以下是结合了全屏变化监听功能的完整示例：

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen Example</title>
</head>
<body>
    <button id="fullscreen-btn">Toggle Fullscreen</button>
    <script>
        document.getElementById("fullscreen-btn").addEventListener("click", function() {
            toggleFullscreen();
        });
        function enterFullscreen() {
            var elem = document.documentElement;
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) { // Firefox
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { // IE/Edge
                elem.msRequestFullscreen();
            }
        }
        function exitFullscreen() {
            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();
            }
        }
        function toggleFullscreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
                enterFullscreen();
            } else {
                exitFullscreen();
            }
        }
        document.addEventListener("fullscreenchange", function() {
            if (document.fullscreenElement) {
                console.log("Entered fullscreen mode");
            } else {
                console.log("Exited fullscreen mode");
            }
        });
    </script>
</body>
</html>

五、实用案例

在实际开发中，全屏功能常用于视频播放器、图片查看器、游戏以及其他需要全屏显示的应用。

1、视频播放器

在视频播放器中，全屏功能可以极大地提升用户观看体验。以下是一个简单的视频播放器示例：

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen Video Player</title>
</head>
<body>
    <video id="video" width="600" controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button id="fullscreen-btn">Fullscreen</button>
    <script>
        document.getElementById("fullscreen-btn").addEventListener("click", function() {
            var video = document.getElementById("video");
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) { // Firefox
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { // IE/Edge
                video.msRequestFullscreen();
            }
        });
        document.addEventListener("fullscreenchange", function() {
            if (!document.fullscreenElement) {
                console.log("Exited fullscreen mode");
            }
        });
    </script>
</body>
</html>

2、图片查看器

在图片查看器中，全屏功能可以提供更大的视图区域，方便用户查看图片细节。以下是一个简单的图片查看器示例：

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen Image Viewer</title>
</head>
<body>
    <img id="image" src="image.jpg" width="600">
    <button id="fullscreen-btn">Fullscreen</button>
    <script>
        document.getElementById("fullscreen-btn").addEventListener("click", function() {
            var image = document.getElementById("image");
            if (image.requestFullscreen) {
                image.requestFullscreen();
            } else if (image.mozRequestFullScreen) { // Firefox
                image.mozRequestFullScreen();
            } else if (image.webkitRequestFullscreen) { // Chrome, Safari and Opera
                image.webkitRequestFullscreen();
            } else if (image.msRequestFullscreen) { // IE/Edge
                image.msRequestFullscreen();
            }
        });
        document.addEventListener("fullscreenchange", function() {
            if (!document.fullscreenElement) {
                console.log("Exited fullscreen mode");
            }
        });
    </script>
</body>
</html>

六、总结

通过本文的介绍，相信你已经了解了如何使用JavaScript实现退出全屏模式，并且掌握了基本的兼容性处理方法和实际应用场景。JavaScript的全屏API是一个非常实用的功能，可以提升用户体验，特别是在需要大屏显示的应用中。 在实际项目中，可以根据具体需求灵活运用这些API，实现更好的用户交互体验。