HTML5全屏代码网页如何实现？-网页设计-锦华智联科技

完整的全屏网页代码示例

这是一个简单但功能齐全的示例,包含了进入全屏、退出全屏以及检测全屏状态的按钮和逻辑。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5 全屏示例</title>
    <style>
        /* 基础样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            margin: 0;
            padding: 20px;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        /* 全屏模式下的背景色变化 */
        :fullscreen {
            background-color: #2c3e50;
        }
        :-webkit-full-screen {
            background-color: #2c3e50;
        }
        :-moz-full-screen {
            background-color: #2c3e50;
        }
        :-ms-fullscreen {
            background-color: #2c3e50;
        }
        h1 {
            color: #1a73e8;
        }
        .controls {
            margin: 30px 0;
        }
        button {
            background-color: #1a73e8;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 10px;
            transition: background-color 0.3s ease, transform 0.1s ease;
        }
        button:hover {
            background-color: #155ab6;
        }
        button:active {
            transform: scale(0.98);
        }
        #status {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        /* 全屏模式下的样式 */
        :fullscreen h1,
        :-webkit-full-screen h1,
        :-moz-full-screen h1,
        :-ms-fullscreen h1 {
            color: #ecf0f1;
        }
        :fullscreen #status,
        :-webkit-full-screen #status,
        :-moz-full-screen #status,
        :-ms-fullscreen #status {
            color: #3498db;
        }
    </style>
</head>
<body>
    <h1>HTML5 全屏 API 演示</h1>
    <p>点击下面的按钮来体验全屏功能。</p>
    <div class="controls">
        <button id="enterBtn">进入全屏</button>
        <button id="exitBtn">退出全屏</button>
    </div>
    <div id="status">当前状态：非全屏</div>
    <script>
        // 获取DOM元素
        const enterBtn = document.getElementById('enterBtn');
        const exitBtn = document.getElementById('exitBtn');
        const statusDiv = document.getElementById('status');
        // --- 核心全屏函数 ---
        /**
         * 进入全屏模式
         * @param {HTMLElement} element - 要全屏显示的元素
         */
        function enterFullscreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) { /* Safari */
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { /* IE11 */
                element.msRequestFullscreen();
            }
        }
        /**
         * 退出全屏模式
         */
        function exitFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }
        /**
         * 检查当前是否处于全屏状态
         * @returns {boolean}
         */
        function isFullscreen() {
            return !!(
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            );
        }
        // --- 事件监听 ---
        // 进入全屏按钮点击事件
        enterBtn.addEventListener('click', () => {
            // 通常我们对整个 body 或 html 元素进行全屏
            enterFullscreen(document.body);
        });
        // 退出全屏按钮点击事件
        exitBtn.addEventListener('click', () => {
            exitFullscreen();
        });
        // 监听全屏状态变化事件
        document.addEventListener('fullscreenchange', updateStatus);
        document.addEventListener('webkitfullscreenchange', updateStatus);
        document.addEventListener('mozfullscreenchange', updateStatus);
        document.addEventListener('MSFullscreenChange', updateStatus);
        // --- 辅助函数 ---
        /**
         * 更新状态显示
         */
        function updateStatus() {
            if (isFullscreen()) {
                statusDiv.textContent = '当前状态：已进入全屏';
                statusDiv.style.color = '#2ecc71';
            } else {
                statusDiv.textContent = '当前状态：非全屏';
                statusDiv.style.color = '#e74c3c';
            }
        }
        // 初始化状态
        updateStatus();
    </script>
</body>
</html>

代码核心解析

Fullscreen API 的兼容性问题

Fullscreen API 是一个相对较新的标准，并且存在浏览器前缀（vendor prefix）的问题，为了确保在所有现代浏览器（包括旧版 Edge、Safari 和 IE11）中都能工作，我们需要编写兼容性代码。

requestFullscreen: 标准方法
webkitRequestFullscreen: Webkit 内核浏览器 (Chrome, Safari, 新版 Edge)
msRequestFullscreen: IE 和旧版 Edge
mozRequestFullScreen: Firefox (注意是 FullScreen，不是 Fullscreen)

退出全屏和检测全屏状态也存在类似的前缀差异,上面的代码通过 if 判断完美地处理了这个问题。

核心方法

element.requestFullscreen(): 在指定的 element 上触发全屏，通常传入 document.body 或 document.documentElement (即 <html> 标签) 来让整个网页全屏。
document.exitFullscreen(): 从当前全屏模式退出。
document.fullscreenElement: 一个只读属性，返回当前处于全屏模式的 Element，如果没有任何元素处于全屏模式，则返回 null，这是检测全屏状态的关键。

核心事件

fullscreenchange: 当元素进入或退出全屏模式时，会在 document 上触发此事件。
- 注意: 这个事件没有提供是进入还是退出的信息，我们需要通过检查 document.fullscreenElement 是否为 null 来判断。
- 同样,为了兼容性，也需要监听带前缀的事件：webkitfullscreenchange, mozfullscreenchange, MSFullscreenChange。

CSS 伪类

Fullscreen API 还提供了一组非常方便的 CSS 伪类，让我们可以为全屏模式下的元素编写特定样式。

fullscreen: 匹配当前处于全屏模式的元素。
-webkit-full-screen: Webkit 浏览器前缀。
-moz-full-screen: Firefox 前缀。
-ms-fullscreen: IE/旧版 Edge 前缀。

在示例的 CSS 部分，我们使用了这些伪类来改变全屏模式下的背景色和文字颜色，提供更好的视觉反馈。

（图片来源网络，侵删）

进阶用法：让特定元素全屏

我们不想让整个页面全屏,而是想让某个特定的元素（比如一张图片、一个视频或一个游戏画布）全屏。

这非常简单,只需要把 requestFullscreen() 方法应用到那个特定的元素上即可。

示例：让图片全屏

<img id="myImage" src="path/to/your/image.jpg" style="max-width: 500px; cursor: pointer;" alt="点击我全屏">
<script>
    const myImage = document.getElementById('myImage');
    myImage.addEventListener('click', () => {
        // 只让这个图片元素全屏
        myImage.requestFullscreen(); // 同样需要兼容性处理
    });
    // 状态更新逻辑与之前类似，但可以检查 myImage 是否在全屏
    document.addEventListener('fullscreenchange', () => {
        if (document.fullscreenElement === myImage) {
            console.log('图片已进入全屏');
        } else {
            console.log('图片已退出全屏');
        }
    });
</script>

安全限制

出于安全考虑,浏览器对全屏功能有一些限制：

（图片来源网络，侵删）

必须由用户交互触发：全屏请求（element.requestFullscreen()）必须由用户行为（如 click、keydown 事件）触发，你不能在 window.onload 或没有用户交互的情况下自动打开全屏。
全屏元素不能是嵌套的：你不能在一个已经全屏的元素内部再让另一个元素全屏，一次只能有一个元素处于全屏状态。

希望这份详细的解释和代码能帮助你完全理解和使用 HTML5 的全屏功能！