js当前页面全屏显示怎么写

在JavaScript中，使用全屏 API 实现当前页面全屏显示，可以通过以下几步来完成：调用requestFullscreen方法、处理不同浏览器的兼容性、添加退出全屏的功能、实现全屏状态变化的监听等。其中，调用requestFullscreen方法是最关键的一步。

要实现页面全屏显示，首先需要获取需要全屏显示的 HTML 元素，然后调用该元素的 requestFullscreen 方法。为了兼容不同的浏览器，可以分别调用 webkitRequestFullscreen、mozRequestFullScreen 和 msRequestFullscreen 方法。下面将详细介绍具体实现步骤和注意事项。

一、调用requestFullscreen方法

全屏 API 提供了 requestFullscreen 方法，可以将页面元素全屏显示。具体实现如下：

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

在这个函数中，elem 是需要全屏显示的 HTML 元素。例如，可以传入 document.documentElement 以全屏显示整个页面。

二、处理不同浏览器的兼容性

不同浏览器对全屏 API 的支持存在差异，除了 requestFullscreen 方法，还需要处理 webkitRequestFullscreen、mozRequestFullScreen 和 msRequestFullscreen 方法。下面是一个完整的示例：

document.getElementById("fullscreenBtn").addEventListener("click", function() {
    openFullscreen(document.documentElement);
});
function openFullscreen(elem) {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}

三、添加退出全屏的功能

在某些情况下，用户可能希望退出全屏模式。全屏 API 提供了 exitFullscreen 方法，可以用于退出全屏。与进入全屏类似，还需要处理不同浏览器的兼容性：

function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

同样，可以为一个按钮添加退出全屏的事件监听：

document.getElementById("exitFullscreenBtn").addEventListener("click", function() {
    closeFullscreen();
});

四、实现全屏状态变化的监听

为了更好地控制用户体验，可以监听全屏状态的变化。全屏 API 提供了 fullscreenchange 事件，当全屏状态变化时触发：

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

对于不同的浏览器，可能需要监听 mozfullscreenchange、webkitfullscreenchange 和 msfullscreenchange 事件：

document.addEventListener("fullscreenchange", onFullscreenChange);
document.addEventListener("mozfullscreenchange", onFullscreenChange);
document.addEventListener("webkitfullscreenchange", onFullscreenChange);
document.addEventListener("msfullscreenchange", onFullscreenChange);
function onFullscreenChange() {
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
}

五、其他注意事项

用户触发：大多数浏览器要求全屏操作必须由用户触发，例如通过点击按钮，而不能在页面加载时自动全屏。
样式调整：进入全屏后，可能需要调整页面的样式，例如隐藏导航栏、调整布局等。
兼容性：全屏 API 在不同浏览器中的支持程度不同，需要进行兼容性处理。

六、完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen API Example</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <button id="fullscreenBtn">Go Fullscreen</button>
    <button id="exitFullscreenBtn">Exit Fullscreen</button>
    <script>
        document.getElementById("fullscreenBtn").addEventListener("click", function() {
            openFullscreen(document.documentElement);
        });
        document.getElementById("exitFullscreenBtn").addEventListener("click", function() {
            closeFullscreen();
        });
        function openFullscreen(elem) {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) {
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
        }
        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
        document.addEventListener("fullscreenchange", onFullscreenChange);
        document.addEventListener("mozfullscreenchange", onFullscreenChange);
        document.addEventListener("webkitfullscreenchange", onFullscreenChange);
        document.addEventListener("msfullscreenchange", onFullscreenChange);
        function onFullscreenChange() {
            if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                console.log("Entered fullscreen mode");
            } else {
                console.log("Exited fullscreen mode");
            }
        }
    </script>
</body>
</html>

这个示例展示了如何使用 JavaScript 全屏 API 实现页面全屏显示和退出全屏功能，同时处理了不同浏览器的兼容性，并监听了全屏状态的变化。通过这些步骤，你可以为用户提供更好的全屏体验。