js 怎么让浏览器全屏显示

要让浏览器全屏显示，可以使用JavaScript的Fullscreen API、监听全屏事件、处理退出全屏等方法来实现。 下面详细介绍其中一个方法：使用Fullscreen API。

一、使用Fullscreen API

Fullscreen API 提供了一组方法和属性来控制和检测全屏状态。它是最常用和推荐的方法，因为它支持大多数现代浏览器，并且操作相对简单。

1、进入全屏模式

要进入全屏模式，可以使用 Element.requestFullscreen() 方法。这个方法可以在任何HTML元素上调用，让该元素及其子元素占据整个屏幕。

function openFullscreen(elem) {
    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 closeFullscreen() {
    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("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});
document.addEventListener("webkitfullscreenchange", function() {
    if (document.webkitFullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});
document.addEventListener("mozfullscreenchange", function() {
    if (document.mozFullScreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});
document.addEventListener("msfullscreenchange", function() {
    if (document.msFullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});

三、处理全屏兼容性问题

不同浏览器对Fullscreen API的实现有所不同，因此要处理兼容性问题。可以使用各种前缀方法来确保在所有主流浏览器中都能正常工作。

四、示例代码

下面是一个完整的示例代码，演示如何使用Fullscreen API来实现全屏功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fullscreen Demo</title>
</head>
<body>
    <button onclick="openFullscreen(document.documentElement)">Enter Fullscreen</button>
    <button onclick="closeFullscreen()">Exit Fullscreen</button>
    <script>
        function openFullscreen(elem) {
            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 closeFullscreen() {
            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("Entered fullscreen mode");
            } else {
                console.log("Exited fullscreen mode");
            }
        });
        document.addEventListener("webkitfullscreenchange", function() {
            if (document.webkitFullscreenElement) {
                console.log("Entered fullscreen mode");
            } else {
                console.log("Exited fullscreen mode");
            }
        });
        document.addEventListener("mozfullscreenchange", function() {
            if (document.mozFullScreenElement) {
                console.log("Entered fullscreen mode");
            } else {
                console.log("Exited fullscreen mode");
            }
        });
        document.addEventListener("msfullscreenchange", function() {
            if (document.msFullscreenElement) {
                console.log("Entered fullscreen mode");
            } else {
                console.log("Exited fullscreen mode");
            }
        });
    </script>
</body>
</html>

五、结论

通过使用Fullscreen API，结合事件监听，可以轻松实现浏览器全屏显示功能。这种方法不仅简单易用，而且具有良好的兼容性。希望这篇文章能帮助你更好地理解并实现全屏功能。