js触发浏览器全屏

在JavaScript中，可以使用全屏API来触发浏览器全屏。以下是相关基础概念、优势、类型、应用场景以及示例代码：

基础概念

全屏API允许网页内容占据整个屏幕，隐藏浏览器界面元素，提供沉浸式的用户体验。

优势

沉浸式体验：用户可以专注于网页内容，不受浏览器界面元素的干扰。
更好的视觉效果：适用于视频播放、游戏、演示文稿等场景，提升用户体验。
交互性强：可以自定义全屏模式下的交互方式，增强用户参与感。

类型

全屏API支持两种全屏模式：

元素全屏：指定一个HTML元素进入全屏模式。
浏览器全屏：整个浏览器窗口进入全屏模式（部分浏览器不支持）。

应用场景

视频播放器：提供全屏观看选项。
游戏：提供全屏游戏体验。
演示文稿：如幻灯片展示，提供全屏放映模式。
教育软件：提供全屏学习环境。

示例代码

以下是一个简单的示例，展示如何使用JavaScript触发元素全屏：

<!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>
    <div id="fullscreenElement" style="width: 300px; height: 200px; background-color: lightblue;">
        Click me to enter fullscreen
    </div>

    <script>
        const element = document.getElementById('fullscreenElement');

        element.addEventListener('click', () => {
            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();
            }
        });

        // 退出全屏
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                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();
                }
            }
        });
    </script>
</body>
</html>