js怎么全屏

JavaScript 全屏方法、requestFullscreen 方法、取消全屏

全屏操作在现代网页应用中变得越来越常见，例如视频播放网站、在线游戏和交互式展示等。要实现 JavaScript 全屏效果，主要方法是使用 requestFullscreen 方法。这个方法允许您将特定的 HTML 元素切换到全屏模式。以下是详细的介绍和实现步骤：

首先，您需要了解 requestFullscreen 方法的基本用法。这是一个标准化的方法，但在不同的浏览器中可能存在一些前缀变体。

一、JavaScript 全屏基础知识

全屏 API 是 HTML5 的一部分，它允许开发者通过 JavaScript 请求将特定元素切换到全屏模式。全屏 API 的核心方法是 requestFullscreen，它可以在指定元素上调用，使该元素进入全屏模式。此外，还有 exitFullscreen 方法可以退出全屏模式。

1. `requestFullscreen` 方法

requestFullscreen 方法用于将元素切换到全屏模式。不同浏览器可能对这个方法有不同的前缀，例如 webkitRequestFullscreen、mozRequestFullScreen 和 msRequestFullscreen。

function enterFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) { // Firefox
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { // IE/Edge
        element.msRequestFullscreen();
    }
}

2. 退出全屏模式

要退出全屏模式，可以调用 document.exitFullscreen 方法。同样地，不同浏览器也可能有不同的前缀方法，例如 webkitExitFullscreen、mozCancelFullScreen 和 msExitFullscreen。

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

二、实现全屏切换功能

现在，我们来实现一个完整的全屏切换功能，包括进入全屏和退出全屏的功能。

1. HTML 结构

首先，创建一个简单的 HTML 结构，包括一个按钮用于触发全屏模式，以及一个目标元素（例如一个 div）进入全屏模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Demo</title>
</head>
<body>
    <div id="fullscreenElement" style="width: 100%; height: 200px; background-color: lightblue;">
        Click the button to go fullscreen
    </div>
    <button id="fullscreenButton">Go Fullscreen</button>
    <script src="fullscreen.js"></script>
</body>
</html>

2. JavaScript 实现

接下来，在 fullscreen.js 文件中实现 JavaScript 逻辑。

document.getElementById('fullscreenButton').addEventListener('click', function() {
    var element = document.getElementById('fullscreenElement');
    if (!document.fullscreenElement) {
        enterFullscreen(element);
    } else {
        exitFullscreen();
    }
});
function enterFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) { // Firefox
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { // IE/Edge
        element.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();
    }
}

三、处理全屏状态的变化

为了更好地处理用户体验，您可能希望在全屏状态变化时更新按钮的文本或者其他 UI 元素。可以使用 fullscreenchange 事件来监听全屏状态的变化。

document.addEventListener('fullscreenchange', function() {
    var button = document.getElementById('fullscreenButton');
    if (document.fullscreenElement) {
        button.textContent = 'Exit Fullscreen';
    } else {
        button.textContent = 'Go Fullscreen';
    }
});

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

为了确保在不同浏览器中的兼容性，您可以创建一个通用的全屏切换函数，封装不同浏览器的前缀方法。

function toggleFullscreen(element) {
    if (!document.fullscreenElement &&
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

五、应用示例

以下是一个完整的示例，展示了如何使用 JavaScript 实现全屏切换功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Demo</title>
    <style>
        #fullscreenElement {
            width: 100%;
            height: 200px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="fullscreenElement">
        Click the button to go fullscreen
    </div>
    <button id="fullscreenButton">Go Fullscreen</button>
    <script>
        document.getElementById('fullscreenButton').addEventListener('click', function() {
            var element = document.getElementById('fullscreenElement');
            toggleFullscreen(element);
        });
        document.addEventListener('fullscreenchange', function() {
            var button = document.getElementById('fullscreenButton');
            if (document.fullscreenElement) {
                button.textContent = 'Exit Fullscreen';
            } else {
                button.textContent = 'Go Fullscreen';
            }
        });
        function toggleFullscreen(element) {
            if (!document.fullscreenElement &&
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        }
    </script>
</body>
</html>

以上步骤就实现了 JavaScript 全屏功能。通过这些方法，您可以轻松地在网页中实现全屏切换效果，增强用户体验。