- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

H5 全屏API：requestFullscreen()

William 发表于 2025/08/18 19:51:44 2025/08/18

【摘要】 1. 引言在当今的Web应用中，全屏体验已成为提升用户沉浸感的关键需求——无论是在线视频平台的全屏观影、在线教育课程的全屏播放、游戏应用的全屏操作，还是数据可视化大屏的全屏展示，用户都期望通过全屏模式获得更专注、更震撼的视觉体验。然而，在HTML5之前，实现全屏功能主要依赖浏览器特定的非标准API（如Firefox的mozRequestFullScreen、Chrome的web...

1. 引言

在当今的Web应用中，全屏体验已成为提升用户沉浸感的关键需求——无论是在线视频平台的全屏观影、在线教育课程的全屏播放、游戏应用的全屏操作，还是数据可视化大屏的全屏展示，用户都期望通过全屏模式获得更专注、更震撼的视觉体验。然而，在HTML5之前，实现全屏功能主要依赖 浏览器特定的非标准API（如Firefox的mozRequestFullScreen、Chrome的webkitRequestFullScreen） 或 复杂的插件方案（如Flash） ，这些方案存在 兼容性差（不同浏览器前缀不统一）、功能单一（仅支持简单全屏切换）、用户体验不一致 等问题。

HTML5 的全屏API（requestFullscreen()） 正是为解决这一痛点而生——它通过标准化的原生JavaScript接口，让开发者可以 跨浏览器、跨设备地控制元素（如视频、画布、整个页面）进入或退出全屏模式 ，并提供统一的事件监听机制，实现灵活的全屏交互逻辑。本文将深入解析全屏API的核心原理，结合实际场景（如视频播放器、游戏界面、数据大屏）通过代码示例详细说明其用法，并探讨其技术趋势与挑战。

2. 技术背景

2.1 为什么需要全屏API？

在HTML5之前，全屏功能的实现面临以下挑战：

兼容性问题：不同浏览器使用不同的非标准API（如Firefox的mozRequestFullScreen、Chrome的webkitRequestFullScreen、IE的msRequestFullscreen），开发者需编写大量兼容性代码。
功能限制：早期方案仅支持简单的全屏切换（如整个页面全屏），无法针对特定元素（如仅视频区域全屏）进行控制，且缺乏统一的事件监听（如全屏状态变化、退出全屏触发）。
用户体验差：非标准API可能导致不同浏览器的全屏样式不一致（如浏览器地址栏是否隐藏、控件布局差异），影响用户的一致性体验。

HTML5 的全屏API通过 标准化接口（requestFullscreen()、exitFullscreen()）和统一事件（fullscreenchange、fullscreenerror） ，彻底解决了上述问题：

跨浏览器兼容：所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持标准API，仅需处理少量前缀差异（现代浏览器已逐步统一为无前缀）。
元素级控制：支持对任意DOM元素（如 <video>、<canvas>、自定义div）发起全屏请求，而非仅限于整个页面。
事件驱动：通过监听全屏状态变化事件，开发者可以动态调整UI（如显示/隐藏自定义控件、调整布局）。

2.2 核心API概述

2.2.1 `requestFullscreen()`方法

作用：请求指定的DOM元素进入全屏模式。
调用对象：任何DOM元素（如 <video>、<div>），调用后会将该元素扩展至整个屏幕。
返回值：返回一个 Promise对象 ，可通过 .then()处理成功逻辑，通过 .catch()捕获失败（如用户拒绝权限）。
常见场景：用户点击“全屏”按钮后，视频或画布元素进入全屏模式。

2.2.2 `exitFullscreen()`方法

作用：退出当前的全屏模式，恢复到普通视图。
调用对象：document对象（即通过 document.exitFullscreen()调用）。
返回值：返回Promise对象，用于处理退出结果。
常见场景：用户点击“退出全屏”按钮，或按ESC键时自动触发。

2.2.3 全屏状态检测

document.fullscreenElement：返回当前处于全屏状态的DOM元素（若无元素全屏，则返回 null）。
document.fullscreenEnabled：布尔值，表示当前文档是否允许进入全屏模式（通常为 true，除非浏览器限制）。

2.2.4 全屏事件

fullscreenchange：当全屏状态发生变化时触发（进入或退出全屏）。
fullscreenerror：当全屏请求失败时触发（如用户拒绝权限、元素不支持全屏）。

2.3 应用场景概览

在线视频：视频播放器的全屏按钮（如YouTube、Netflix），支持用户沉浸式观影。
在线教育：课程视频或PPT演示的全屏模式，提升学习专注度。
游戏应用：游戏画布的全屏渲染，提供更大的操作空间。
数据可视化：大屏仪表盘的全屏展示（如企业监控中心），突出关键信息。

3. 应用使用场景

3.1 场景1：基础全屏切换（视频全屏）

需求：在网页中嵌入一个视频，提供“全屏”按钮，点击后通过 requestFullscreen()让视频进入全屏模式，点击“退出全屏”按钮或按ESC键退出。

3.2 场景2：元素级全屏控制（自定义div全屏）

需求：将页面中的某个自定义div（如图片画廊、图表容器）单独全屏显示，而非整个页面。

3.3 场景3：全屏状态监听（动态UI调整）

需求：监听全屏状态变化（进入/退出），动态显示/隐藏自定义控件（如全屏时隐藏顶部导航栏）。

3.4 场景4：兼容性处理（多浏览器前缀）

需求：适配不同浏览器的旧版本（如Firefox的mozRequestFullScreen、Chrome的webkitRequestFullScreen），确保全屏功能在所有环境中可用。

4. 不同场景下的详细代码实现

4.1 环境准备

开发工具：任意文本编辑器（如VS Code）、浏览器（Chrome/Firefox/Safari/Edge）。
技术栈：纯HTML5 + JavaScript（无需框架），需准备视频文件（如MP4格式）。
注意事项：全屏API需由用户交互（如点击按钮）触发，否则浏览器可能拒绝请求（安全策略）。

4.2 场景1：基础全屏切换（视频全屏）

4.2.1 核心代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础视频全屏（requestFullscreen）</title>
  <style>
    .video-container {
      max-width: 800px;
      margin: 20px auto;
      text-align: center;
    }
    video {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .fullscreen-btn {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <h2>视频全屏演示</h2>
    <!-- 视频标签（禁用默认全屏控件，通过自定义按钮控制） -->
    <video id="my-video" controls>
      <source src="https://example.com/video/demo.mp4" type="video/mp4">
      您的浏览器不支持HTML5视频标签。
    </video>
    <button id="fullscreen-btn" class="fullscreen-btn">进入全屏</button>
  </div>

  <script>
    const video = document.getElementById('my-video');
    const fullscreenBtn = document.getElementById('fullscreen-btn');

    // 进入全屏按钮
    fullscreenBtn.addEventListener('click', () => {
      // 调用视频元素的requestFullscreen方法
      if (video.requestFullscreen) {
        video.requestFullscreen().then(() => {
          console.log('视频已进入全屏模式');
        }).catch((error) => {
          console.error('全屏请求失败:', error); // 用户拒绝权限或其他错误
        });
      } else {
        console.error('浏览器不支持全屏API');
      }
    });

    // 监听全屏状态变化（动态更新按钮文本）
    document.addEventListener('fullscreenchange', () => {
      if (document.fullscreenElement === video) {
        fullscreenBtn.textContent = '退出全屏';
      } else {
        fullscreenBtn.textContent = '进入全屏';
      }
    });

    // 监听全屏错误（可选）
    document.addEventListener('fullscreenerror', (error) => {
      console.error('全屏过程中发生错误:', error);
    });
  </script>
</body>
</html>

代码解释：

核心API调用：
- video.requestFullscreen()：请求视频元素进入全屏模式（返回Promise，处理成功/失败）。
- document.fullscreenElement：检测当前处于全屏状态的元素（若为视频元素，则表示全屏已激活）。
事件监听：
- fullscreenchange：当全屏状态变化时（进入或退出），更新按钮文本（“进入全屏”→“退出全屏”）。
- fullscreenerror：捕获全屏请求失败的错误（如用户按ESC键退出或浏览器拒绝）。
兼容性：现代浏览器已支持无前缀的 requestFullscreen()，旧版本可能需要处理前缀（如 mozRequestFullScreen）。

4.2.2 运行结果

点击“进入全屏”按钮后，视频扩展至整个屏幕；再次点击按钮（此时文本变为“退出全屏”）或按ESC键，退出全屏模式。
控制台输出全屏状态变化日志（如“视频已进入全屏模式”）。

4.3 场景2：元素级全屏控制（自定义div全屏）

4.3.1 核心代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义div全屏</title>
  <style>
    .container {
      max-width: 800px;
      margin: 20px auto;
      text-align: center;
    }
    .fullscreen-div {
      width: 500px;
      height: 300px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      margin: 20px auto;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      cursor: pointer;
    }
    .enter-fs-btn {
      margin-top: 10px;
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>自定义div全屏演示</h2>
    <!-- 自定义div（非视频元素） -->
    <div id="my-div" class="fullscreen-div">
      这是一个可全屏的div区域
    </div>
    <button id="enter-fs-btn" class="enter-fs-btn">进入全屏</button>
  </div>

  <script>
    const myDiv = document.getElementById('my-div');
    const enterFsBtn = document.getElementById('enter-fs-btn');

    enterFsBtn.addEventListener('click', () => {
      if (myDiv.requestFullscreen) {
        myDiv.requestFullscreen().then(() => {
          console.log('div已进入全屏模式');
        }).catch((error) => {
          console.error('全屏请求失败:', error);
        });
      }
    });

    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', () => {
      if (document.fullscreenElement === myDiv) {
        enterFsBtn.textContent = '退出全屏';
      } else {
        enterFsBtn.textContent = '进入全屏';
      }
    });
  </script>
</body>
</html>

代码解释：

核心逻辑：通过 myDiv.requestFullscreen()让自定义的 <div>元素进入全屏模式（非视频元素同样适用）。
样式适配：全屏时，div的背景渐变和文字会占满整个屏幕，提供沉浸式体验。

4.4 场景3：全屏状态监听（动态UI调整）

4.4.1 核心代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏状态监听</title>
  <style>
    .header {
      background: #333;
      color: white;
      padding: 10px;
      text-align: center;
      transition: opacity 0.3s;
    }
    .video-container {
      max-width: 800px;
      margin: 20px auto;
    }
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="header" id="header">
    这是顶部导航栏（全屏时隐藏）
  </div>
  <div class="video-container">
    <video id="my-video" controls width="100%">
      <source src="https://example.com/video/demo.mp4" type="video/mp4">
    </video>
  </div>

  <script>
    const header = document.getElementById('header');
    const video = document.getElementById('my-video');

    document.addEventListener('fullscreenchange', () => {
      if (document.fullscreenElement) {
        header.style.opacity = '0'; // 全屏时隐藏导航栏
      } else {
        header.style.opacity = '1'; // 退出全屏时显示导航栏
      }
    });
  </script>
</body>
</html>

代码解释：

功能：通过监听 fullscreenchange事件，动态调整顶部导航栏的透明度（全屏时隐藏，退出全屏时显示）。
扩展性：可根据需求调整其他UI元素（如侧边栏、工具栏）的显示状态。

4.5 场景4：兼容性处理（多浏览器前缀）

4.5.1 核心代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏API兼容性处理</title>
  <style>
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <video id="my-video" controls width="100%">
    <source src="https://example.com/video/demo.mp4" type="video/mp4">
  </video>
  <button id="fs-btn">进入全屏（兼容旧浏览器）</button>

  <script>
    const video = document.getElementById('my-video');
    const fsBtn = document.getElementById('fs-btn');

    function requestFullscreen(element) {
      if (element.requestFullscreen) {
        return element.requestFullscreen();
      } else if (element.mozRequestFullScreen) { // Firefox
        return element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { // Chrome/Safari
        return element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { // IE/Edge
        return element.msRequestFullscreen();
      }
      return Promise.reject('浏览器不支持全屏API');
    }

    fsBtn.addEventListener('click', () => {
      requestFullscreen(video).then(() => {
        console.log('全屏成功');
      }).catch((error) => {
        console.error('全屏失败:', error);
      });
    });
  </script>
</body>
</html>

代码解释：

兼容性逻辑：通过检测不同浏览器的前缀方法（如 mozRequestFullScreen、webkitRequestFullscreen），确保在旧版本浏览器中也能调用全屏功能。
现代浏览器：可直接使用无前缀的 requestFullscreen()。

5. 原理解释

5.1 全屏API的核心机制

5.1.1 请求全屏（`requestFullscreen()`）

触发条件：必须由用户交互（如点击按钮、触摸事件）直接调用，否则浏览器会拒绝请求（安全策略）。
执行流程：
- 调用指定DOM元素的 requestFullscreen()方法（如视频元素、自定义div）。
- 浏览器检查当前环境是否允许全屏（如未锁定鼠标、页面未处于iframe限制）。
- 若允许，将目标元素扩展至整个屏幕（隐藏浏览器UI如地址栏、工具栏），并触发 fullscreenchange事件。
返回值：返回Promise对象，成功时解析（.then()），失败时拒绝（.catch()，如用户拒绝权限）。

5.1.2 退出全屏（`exitFullscreen()`）

触发方式：用户按ESC键，或调用 document.exitFullscreen()方法。
执行流程：
- 浏览器将当前全屏元素恢复至原始大小，并重新显示浏览器UI。
- 触发 fullscreenchange事件（document.fullscreenElement变为 null）。

5.1.3 状态检测

document.fullscreenElement：当前处于全屏状态的DOM元素（若无则为 null），用于判断是否处于全屏模式。
document.fullscreenEnabled：布尔值，表示当前文档是否允许全屏（通常为 true，除非浏览器策略限制）。

5.1.4 事件监听

fullscreenchange：全屏状态变化时触发（进入或退出），用于动态调整UI逻辑。
fullscreenerror：全屏请求失败时触发（如权限拒绝、元素不支持），用于错误处理。

5.2 核心特性总结

特性	说明	优势
标准化接口	所有现代浏览器支持无前缀的 `requestFullscreen()`和 `exitFullscreen()`	跨浏览器兼容，无需处理复杂前缀
元素级控制	支持任意DOM元素（视频、画布、自定义div）进入全屏，而非仅限整个页面	实现局部全屏（如仅视频区域放大）
事件驱动	通过 `fullscreenchange`和 `fullscreenerror`事件监听状态变化和错误	动态调整UI，提升用户体验
安全策略	必须由用户交互触发，防止恶意页面强制全屏	保障用户控制权
兼容性适配	支持旧浏览器的前缀方法（如 `mozRequestFullScreen`）	覆盖更广泛的浏览器环境

6. 原理流程图

[用户点击全屏按钮] → 调用元素.requestFullscreen()（需用户交互）
  ↓
[浏览器检查权限与环境] → 允许则进入全屏模式（隐藏浏览器UI）
  ↓
[触发fullscreenchange事件] → document.fullscreenElement = 目标元素
  ↓
[用户按ESC或调用exitFullscreen()] → 退出全屏模式（显示浏览器UI）
  ↓
[触发fullscreenchange事件] → document.fullscreenElement = null

7. 环境准备

开发工具：任意文本编辑器（如VS Code）、浏览器（Chrome/Firefox/Safari/Edge）。
技术栈：纯HTML5 + JavaScript（无需框架）。
媒体文件：若演示视频全屏，需准备MP4格式的视频文件（通过本地服务器访问，避免路径问题）。
本地服务器：推荐使用VS Code的Live Server插件或Python的 http.server模块启动静态服务。

8. 实际详细应用代码示例（综合场景：视频播放器全屏控制）

需求：开发一个完整的视频播放器，包含播放/暂停、进度条、全屏按钮，且全屏时隐藏顶部导航栏，退出全屏时恢复。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频播放器全屏控制</title>
  <style>
    .player-container {
      max-width: 800px;
      margin: 20px auto;
    }
    .header {
      background: #333;
      color: white;
      padding: 10px;
      text-align: center;
      transition: opacity 0.3s;
    }
    video {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .controls {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    button {
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="header" id="header">
    视频播放器导航栏（全屏时隐藏）
  </div>
  <div class="player-container">
    <video id="my-video" controls>
      <source src="https://example.com/video/demo.mp4" type="video/mp4">
    </video>
    <div class="controls">
      <button id="play-btn">播放</button>
      <button id="pause-btn">暂停</button>
      <button id="fs-btn">全屏</button>
    </div>
  </div>

  <script>
    const video = document.getElementById('my-video');
    const playBtn = document.getElementById('play-btn');
    const pauseBtn = document.getElementById('pause-btn');
    const fsBtn = document.getElementById('fs-btn');
    const header = document.getElementById('header');

    // 播放控制
    playBtn.addEventListener('click', () => video.play());
    pauseBtn.addEventListener('click', () => video.pause());

    // 全屏控制
    fsBtn.addEventListener('click', () => {
      if (video.requestFullscreen) {
        video.requestFullscreen().then(() => {
          console.log('视频全屏');
        }).catch((error) => {
          console.error('全屏失败:', error);
        });
      }
    });

    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', () => {
      if (document.fullscreenElement === video) {
        header.style.opacity = '0'; // 全屏时隐藏导航栏
        fsBtn.textContent = '退出全屏';
      } else {
        header.style.opacity = '1'; // 退出全屏时显示导航栏
        fsBtn.textContent = '全屏';
      }
    });
  </script>
</body>
</html>

运行结果：

点击“全屏”按钮后，视频扩展至全屏，顶部导航栏隐藏；点击“退出全屏”按钮（或按ESC键）后，恢复原始视图和导航栏。

9. 运行结果

基础全屏：视频成功进入/退出全屏模式，控制台输出状态日志。
元素级全屏：自定义div占满整个屏幕，背景样式适配。
动态UI调整：全屏时导航栏隐藏，退出后恢复显示。

10. 测试步骤及详细代码

10.1 测试用例1：全屏请求成功

操作：点击“进入全屏”按钮，检查目标元素是否扩展至全屏。
验证点：requestFullscreen()是否生效，document.fullscreenElement是否指向目标元素。

10.2 测试用例2：全屏退出

操作：按ESC键或点击“退出全屏”按钮，检查是否恢复原始视图。
验证点：document.fullscreenElement是否变为 null。

10.3 测试用例3：兼容性验证

操作：在Firefox、Chrome、Safari中分别测试全屏功能。
验证点：不同浏览器的前缀方法（如 mozRequestFullScreen）是否兼容。

11. 部署场景

在线视频平台：集成到视频播放器中，提供用户全屏观影体验。
在线教育平台：课程视频全屏播放，提升学习专注度。
数据大屏应用：企业监控仪表盘全屏展示，突出关键指标。

12. 疑难解答

常见问题1：全屏请求被拒绝

原因：未由用户交互触发（如页面加载后自动调用），或浏览器安全策略限制（如iframe内嵌页面）。
解决：确保全屏API调用由用户点击按钮等交互事件直接触发。

常见问题2：全屏后样式错乱

原因：全屏模式下元素的CSS样式（如定位、字体大小）未适配屏幕尺寸。
解决：使用相对单位（如百分比、vw/vh）或监听 fullscreenchange事件动态调整样式。

常见问题3：旧浏览器不支持

原因：IE11等旧浏览器可能不支持无前缀的 requestFullscreen()。
解决：通过兼容性代码（如 msRequestFullscreen）处理旧版本。

13. 未来展望与技术趋势

13.1 技术趋势

与PWA（渐进式Web应用）结合：全屏API与Service Worker配合，实现离线状态下的全屏媒体播放（如缓存视频后全屏观看）。
AR/VR场景扩展：在WebXR（Web虚拟现实）中，全屏API可能扩展为沉浸式3D环境的全屏控制。
多屏协同：支持将特定元素全屏到外接显示器（如通过 Presentation API结合全屏API）。

13.2 挑战

移动端限制：部分移动浏览器（如iOS Safari）对全屏API的支持存在差异（如无法隐藏状态栏）。
安全策略强化：未来浏览器可能进一步限制全屏API的调用场景（如仅允许特定域名的页面使用）。
无障碍访问：需为视障用户提供全屏模式下的音频提示（如“当前处于全屏状态”）。

14. 总结

HTML5 的全屏API（requestFullscreen()）通过标准化接口和事件机制，为Web应用提供了 跨浏览器、元素级、可交互的全屏控制能力 。其核心价值在于 提升用户沉浸感、适配多样化场景（视频/游戏/数据展示）、支持动态UI调整 ，已成为现代Web开发中实现高质量用户体验的必备工具。尽管面临移动端限制和安全策略挑战，但随着PWA、WebXR等技术的发展，全屏API将进一步拓展应用边界，为用户带来更丰富的沉浸式体验。开发者掌握这一API，不仅能优化现有功能，还能探索创新的交互模式。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

H5 全屏API：requestFullscreen()

​​1. 引言​​

​​2. 技术背景​​

​​2.1 为什么需要全屏API？​​

​​2.2 核心API概述​​

​​2.2.1 requestFullscreen()方法​​

​​2.2.2 exitFullscreen()方法​​

​​2.2.3 全屏状态检测​​

​​2.2.4 全屏事件​​

​​2.3 应用场景概览​​

​​3. 应用使用场景​​

​​3.1 场景1：基础全屏切换（视频全屏）​​

​​3.2 场景2：元素级全屏控制（自定义div全屏）​​

​​3.3 场景3：全屏状态监听（动态UI调整）​​

​​3.4 场景4：兼容性处理（多浏览器前缀）​​

​​4. 不同场景下的详细代码实现​​

​​4.1 环境准备​​

​​4.2 场景1：基础全屏切换（视频全屏）​​

​​4.2.1 核心代码实现​​

​​4.2.2 运行结果​​

​​4.3 场景2：元素级全屏控制（自定义div全屏）​​

​​4.3.1 核心代码实现​​

​​4.4 场景3：全屏状态监听（动态UI调整）​​

​​4.4.1 核心代码实现​​

​​4.5 场景4：兼容性处理（多浏览器前缀）​​

​​4.5.1 核心代码实现​​

​​5. 原理解释​​

​​5.1 全屏API的核心机制​​

​​5.1.1 请求全屏（requestFullscreen()）​​

​​5.1.2 退出全屏（exitFullscreen()）​​

​​5.1.3 状态检测​​

​​5.1.4 事件监听​​

​​5.2 核心特性总结​​

​​6. 原理流程图​​

​​7. 环境准备​​

​​8. 实际详细应用代码示例（综合场景：视频播放器全屏控制）​​

​​9. 运行结果​​

​​10. 测试步骤及详细代码​​

​​10.1 测试用例1：全屏请求成功​​

​​10.2 测试用例2：全屏退出​​

​​10.3 测试用例3：兼容性验证​​

​​11. 部署场景​​

​​12. 疑难解答​​

​​常见问题1：全屏请求被拒绝​​

​​常见问题2：全屏后样式错乱​​

​​常见问题3：旧浏览器不支持​​

​​13. 未来展望与技术趋势​​

​​13.1 技术趋势​​

​​13.2 挑战​​

​​14. 总结​​

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

1. 引言

2. 技术背景

2.1 为什么需要全屏API？

2.2 核心API概述

2.2.1 `requestFullscreen()`方法

2.2.2 `exitFullscreen()`方法

2.2.3 全屏状态检测

2.2.4 全屏事件

2.3 应用场景概览

3. 应用使用场景

3.1 场景1：基础全屏切换（视频全屏）

3.2 场景2：元素级全屏控制（自定义div全屏）

3.3 场景3：全屏状态监听（动态UI调整）

3.4 场景4：兼容性处理（多浏览器前缀）

4. 不同场景下的详细代码实现

4.1 环境准备

4.2 场景1：基础全屏切换（视频全屏）

4.2.1 核心代码实现

4.2.2 运行结果

4.3 场景2：元素级全屏控制（自定义div全屏）

4.3.1 核心代码实现

4.4 场景3：全屏状态监听（动态UI调整）

4.4.1 核心代码实现

4.5 场景4：兼容性处理（多浏览器前缀）

4.5.1 核心代码实现

5. 原理解释

5.1 全屏API的核心机制

5.1.1 请求全屏（`requestFullscreen()`）

5.1.2 退出全屏（`exitFullscreen()`）

5.1.3 状态检测

5.1.4 事件监听

5.2 核心特性总结

6. 原理流程图

7. 环境准备

8. 实际详细应用代码示例（综合场景：视频播放器全屏控制）

9. 运行结果

10. 测试步骤及详细代码

10.1 测试用例1：全屏请求成功

10.2 测试用例2：全屏退出

10.3 测试用例3：兼容性验证

11. 部署场景

12. 疑难解答

常见问题1：全屏请求被拒绝

常见问题2：全屏后样式错乱

常见问题3：旧浏览器不支持

13. 未来展望与技术趋势

13.1 技术趋势

13.2 挑战

14. 总结