Flash全屏代码如何正确使用？-网页设计-锦华智联科技

Adobe Flash Player 已被官方淘汰并停止支持，在所有现代浏览器（如 Chrome, Firefox, Edge, Safari）中默认都是禁用的。 任何使用纯 Flash 技术的全屏方案在今天都无法正常工作。

（图片来源网络，侵删）

您的问题核心是“网页全屏代码”,我们可以分为两种情况来解答：

历史遗留问题：如何在 Flash 时代实现全屏（仅作了解）。
现代解决方案：如何使用 HTML5 技术实现真正的全屏网页（推荐使用）。

历史遗留 - Flash 全屏代码（已过时）

在 Flash 的鼎盛时期,主要有两种方式实现全屏：

方法 A: Flash Player 自带的全屏按钮

这是最简单的方式，你不需要写任何 ActionScript (Flash 的编程语言) 代码，只需要在发布 Flash 影片 (.swf 文件) 时,勾选一个选项即可。

在 Adobe Flash Professional (旧版) 中：
（图片来源网络，侵删）
- 打开你的 .fla 源文件。
- 点击菜单栏的 文件 -> 发布设置。
- 切换到 HTML 选项卡。
- 在 模板 下拉菜单中，选择 Flash Only - Full Screen。
- 点击 发布，这样生成的 HTML 文件就会自动包含一个全屏按钮，点击后 Flash 影片会占据整个浏览器窗口。
在 Flash 中添加自定义全屏按钮： 如果你想自己设计一个按钮来触发全屏，就需要使用 ActionScript 2.0 或 3.0 的代码。
- ActionScript 2.0 (AS2):
```
// 给你的按钮实例命名，"fullscreen_btn"
fullscreen_btn.onRelease = function() {
// 切换全屏模式
Stage.displayState = Stage["displayState"] == "fullScreen" ? "normal" : "fullScreen";
};
```
- ActionScript 3.0 (AS3):
```
// 给你的按钮实例命名，"fullscreen_btn"
fullscreen_btn.addEventListener(MouseEvent.CLICK, toggleFullScreen);
```
function toggleFullScreen(e:MouseEvent):void { // 检查当前是否已经是全屏状态 if (stage.displayState == StageDisplayState.NORMAL) { // 如果不是，则切换到全屏 stage.displayState = StageDisplayState.FULL_SCREEN; } else { // 如果是，则切换回正常模式 stage.displayState = StageDisplayState.NORMAL; } }
（图片来源网络，侵删）

为什么这个方法现在无效了？ 因为浏览器出于安全考虑，要求全屏功能必须由用户的直接交互（如点击按钮）触发，而不能由代码自动触发（例如页面加载后自动全屏），Flash 的全屏功能遵循了这个规则，但由于 Flash 本身已被淘汰,这些代码也就失去了作用。

现代解决方案 - HTML5 全屏 API（强烈推荐）

所有现代网页都使用 HTML, CSS 和 JavaScript，实现全屏功能的标准方法是使用 Fullscreen API,这是目前唯一有效且被广泛支持的方法。

下面我将为你提供一个完整的、可直接使用的代码示例。

完整示例代码

这个例子包含一个按钮，点击后整个 <html> 元素（即整个网页）会进入全屏模式。

<!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: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
        }
        body:-webkit-full-screen {
            background-color: #333; /* 全屏时的背景色 */
        }
        h1 {
            color: #333;
        }
        /* 全屏按钮的样式 */
        #fullscreenBtn {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: 1px solid #007bff;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            margin-top: 20px;
        }
        #fullscreenBtn:hover {
            background-color: #0056b3;
        }
        /* 一个用于演示的盒子 */
        .demo-box {
            width: 300px;
            height: 200px;
            background-color: #007bff;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>HTML5 全屏功能演示</h1>
    <div class="demo-box">这是一个可以全屏的盒子</div>
    <!-- 点击此按钮触发全屏 -->
    <button id="fullscreenBtn">进入全屏</button>
    <script>
        // 获取按钮元素
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const demoBox = document.querySelector('.demo-box');
        // --- 核心全屏功能函数 ---
        /**
         * 打开全屏
         */
        function openFullscreen() {
            const elem = document.documentElement; // 获取整个 html 元素
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }
        /**
         * 退出全屏
         */
        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }
        // --- 事件监听 ---
        // 1. 点击按钮时，切换全屏状态
        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) { // 如果当前不是全屏状态
                openFullscreen();
                fullscreenBtn.textContent = '退出全屏';
            } else { // 如果当前是全屏状态
                closeFullscreen();
                fullscreenBtn.textContent = '进入全屏';
            }
        });
        // 2. 监听全屏变化事件，更新按钮文本
        document.addEventListener('fullscreenchange', updateButtonText);
        document.addEventListener('webkitfullscreenchange', updateButtonText); // Safari
        function updateButtonText() {
            if (!document.fullscreenElement) {
                fullscreenBtn.textContent = '进入全屏';
            } else {
                fullscreenBtn.textContent = '退出全屏';
            }
        }
        // --- 可选：让特定元素（如 demoBox）全屏 ---
        // 你可以创建另一个按钮，把 document.documentElement 换成 demoBox 即可
        /*
        const boxFullscreenBtn = document.getElementById('boxFullscreenBtn');
        boxFullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                demoBox.requestFullscreen();
            } else {
                closeFullscreen();
            }
        });
        */
    </script>
</body>
</html>

如何使用这段代码

复制代码：将上面的所有代码复制下来。
创建文件：创建一个新的文本文件，将其命名为 fullscreen.html（确保后缀是 .html）。
粘贴保存：将复制的代码粘贴到这个文件中,然后保存。
在浏览器中打开：用 Chrome、Firefox、Edge 或 Safari 等现代浏览器打开这个 fullscreen.html 文件。
测试：点击页面上的“进入全屏”按钮，整个页面就会变成全屏，按 ESC 键或再次点击“退出全屏”按钮可以退出。

代码关键点解释

requestFullscreen(): JavaScript 的核心方法，用于请求某个元素进入全屏模式，它需要加浏览器前缀（如 webkit-）来兼容不同浏览器。
exitFullscreen(): 用于退出全屏模式。
document.fullscreenElement: 一个只读属性，如果当前有元素处于全屏状态，它就返回该元素；否则返回 null,我们用它来判断当前是否是全屏状态。
fullscreenchange 事件: 当全屏状态发生变化时（进入或退出），浏览器会触发这个事件，我们监听它来动态更新按钮的文字,提供更好的用户体验。
浏览器兼容性: 代码中包含了 webkit- (Chrome, Safari, Edge) 和 ms- (IE11) 的前缀,以确保在主流浏览器中都能工作。

特性	Flash 全屏 (已过时)	HTML5 Fullscreen API (推荐)
技术基础	ActionScript, Flash Player	JavaScript, HTML5, CSS
浏览器支持	已被所有现代浏览器禁用	所有现代浏览器均支持
安全性	较差，已被淘汰	高，必须由用户交互触发
未来	无未来	是网页全屏功能的标准

请彻底放弃使用 Flash 实现全屏的想法，如果您需要为网页或应用添加全屏功能，请直接使用上面提供的 HTML5 Fullscreen API 代码，它简单、安全、现代,并且是唯一能在今天工作的方案。