在 HTML 中，可以通过调用浏览器的全屏 API 实现页面或页面中的某个元素全屏显示。全屏 API 是 HTML5 提供的一项功能，允许将元素切换为全屏模式。

使用全屏 API 实现全屏

全屏 API 提供了以下常用方法和属性：

  • requestFullscreen()：请求将元素设置为全屏模式。
  • exitFullscreen()：退出全屏模式。
  • fullscreenElement：返回当前正在全屏显示的 DOM 元素，如果没有元素全屏，则返回 null。
  • fullscreenchange 事件：当全屏状态发生变化时触发，用来监听进入或退出全屏。

实现全屏的基本步骤

  1. 选择你希望全屏的元素。
  2. 使用 element.requestFullscreen() 方法来进入全屏。
  3. 使用 document.exitFullscreen() 来退出全屏模式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏示例</title>
  <style>
    #fullscreenContent {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 50px auto;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>

  <div id="fullscreenContent">点击全屏</div>
  <button id="exitFullscreenBtn" style="display:none;">退出全屏</button>

  <script>
    const fullscreenContent = document.getElementById('fullscreenContent');
    const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');

    // 进入全屏模式
    fullscreenContent.addEventListener('click', function() {
      if (fullscreenContent.requestFullscreen) {
        fullscreenContent.requestFullscreen();
      } else if (fullscreenContent.mozRequestFullScreen) { // Firefox
        fullscreenContent.mozRequestFullScreen();
      } else if (fullscreenContent.webkitRequestFullscreen) { // Chrome, Safari and Opera
        fullscreenContent.webkitRequestFullscreen();
      } else if (fullscreenContent.msRequestFullscreen) { // IE/Edge
        fullscreenContent.msRequestFullscreen();
      }
      exitFullscreenBtn.style.display = 'inline-block';
    });

    // 退出全屏模式
    exitFullscreenBtn.addEventListener('click', function() {
      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();
      }
      exitFullscreenBtn.style.display = 'none';
    });

    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', () => {
      console.log('全屏状态发生变化');
    });
  </script>

</body>
</html>

代码解释

  1. 进入全屏：点击 #fullscreenContent 的 div 时，调用 requestFullscreen() 方法使该元素进入全屏模式。
  2. 退出全屏：点击按钮 #exitFullscreenBtn，调用 document.exitFullscreen() 退出全屏模式。
  3. 跨浏览器兼容性：由于部分浏览器的全屏 API 有不同的实现方法，代码中兼容了各个主流浏览器的实现（例如 Chrome, Firefox, Safari, Edge）。
  4. 监听全屏状态变化：使用 fullscreenchange 事件来监听当前全屏模式的变化，可以在进入或退出全屏时执行额外操作。

全屏 API 的一些注意事项

  • 全屏 API 只能在用户交互（如点击或按键事件）后触发，不能通过脚本自动进入全屏模式，这是为了防止用户体验被打断。
  • 不同浏览器的全屏 API 实现可能稍有不同，因此通常需要做一些兼容性处理。
  • 在移动端设备上，全屏模式的行为可能与桌面端有所不同。

总结

HTML5 的全屏 API 提供了一种简单而直观的方法来让页面或元素进入全屏模式。通过 requestFullscreen() 方法可以将任意元素全屏显示，exitFullscreen() 则用来退出全屏模式。结合 fullscreenchange 事件可以对全屏状态进行监控，实现更加丰富的交互体验。

常见考点

1. 全屏 API 的基本概念

  • 定义：全屏 API 允许开发者通过 JavaScript 将页面中的某个元素或整个页面切换到全屏模式，使其填充整个显示器。
  • 主要用途：常见于视频播放、图表展示、游戏、幻灯片等需要用户专注于内容的场景。

2. 启用全屏

  • 进入全屏：通过调用元素的 requestFullscreen() 方法可以使该元素进入全屏模式，常考点包括如何正确使用该方法。
const element = document.getElementById('myElement');
element.requestFullscreen();
  • 前缀兼容：某些浏览器使用前缀（如 webkitRequestFullscreen 或 mozRequestFullScreen），考察点可能包括如何处理跨浏览器的兼容性。
element.requestFullscreen = element.requestFullscreen ||
                            element.webkitRequestFullscreen ||
                            element.mozRequestFullScreen ||
                            element.msRequestFullscreen;
element.requestFullscreen();

3. 退出全屏

  • 退出全屏：通过 document.exitFullscreen() 方法退出全屏模式，考察点包括如何实现全屏模式的切换。
if (document.fullscreenElement) {
    document.exitFullscreen();
}
  • 退出全屏的兼容性：和进入全屏一样，部分浏览器可能需要使用前缀版本的 exitFullscreen 方法。

4. 全屏状态检测

  • fullscreenElement 属性：通过 document.fullscreenElement 检测当前是否有元素处于全屏状态，返回当前处于全屏状态的元素。
if (document.fullscreenElement) {
    console.log('Element is in full-screen mode');
} else {
    console.log('No element in full-screen mode');
}

5. 全屏 API 的事件

  • fullscreenchange 事件：当页面进入或退出全屏模式时，会触发 fullscreenchange 事件。常考点包括如何监听全屏状态的变化并执行相应的逻辑。
document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log('Entered full-screen mode');
    } else {
        console.log('Exited full-screen mode');
    }
});
  • fullscreenerror 事件：当进入全屏模式的请求失败时，会触发 fullscreenerror 事件。考察点可能包括如何处理错误并进行降级处理。
document.addEventListener('fullscreenerror', (event) => {
    console.log('Error attempting to enable full-screen mode', event);
});

6. 全屏 API 的兼容性

  • 跨浏览器支持：不同浏览器对全屏 API 的支持情况不同，尤其是旧版浏览器可能需要带有前缀的方法（如 webkitRequestFullscreen 或 mozRequestFullScreen）。如何处理这些兼容性问题是常见考点。

7. 全屏与 CSS

  • CSS 样式影响：当页面进入全屏模式后，可能会影响一些 CSS 样式的表现，例如元素的 position、z-index 等。考察点包括如何处理全屏模式下的 CSS 样式布局问题。
  • :fullscreen 伪类：全屏模式下，浏览器会自动应用 :fullscreen 伪类，可以用于自定义全屏模式下的样式。
:fullscreen {
    background-color: black;
}

8. 全屏 API 的限制

  • 用户交互限制：现代浏览器出于安全原因，通常要求全屏请求必须由用户的某个操作（如点击按钮）触发，而不能通过自动执行脚本进入全屏。考察点可能包括如何处理这种限制。
button.addEventListener('click', () => {
    element.requestFullscreen();
});

9. 全屏模式与多屏幕支持

  • 多显示器情况下的全屏：考察点可能包括在多屏幕环境中使用全屏 API 的表现，尤其是如何处理多个显示器的分辨率和窗口显示。

10. 全屏 API 的应用场景

  • 视频播放：全屏 API 常用于视频播放器中，考察点可能包括如何在视频播放时切换全屏，并处理退出全屏的逻辑。
  • 游戏和图形应用：如何在游戏或图形应用中使用全屏模式，以提升用户体验和沉浸感。
  • 幻灯片或演示文稿：在展示幻灯片时，如何利用全屏 API 来增强展示效果。

11. 错误处理

  • 权限限制：部分浏览器或操作系统可能会限制或阻止全屏请求，尤其是在移动设备上，考察如何处理这些情况并提供反馈。
  • 异步操作：进入或退出全屏模式通常是异步操作，如何确保用户体验的流畅性也是一个重要考点。

12. 性能影响

  • 全屏模式的性能问题：考察点可能涉及全屏模式下页面渲染、动画或媒体播放的性能影响，如何优化性能以避免全屏模式下的卡顿或延迟。

13. 移动设备支持

  • 移动端的全屏支持：全屏 API 在移动设备上的支持存在差异，尤其是如何处理不同设备上的全屏显示，如处理 iOS Safari 对全屏模式的支持情况。

14. UI 变化的处理

  • 隐藏 UI 控件：考察如何在全屏模式下隐藏一些不必要的 UI 元素（如导航栏、按钮），从而提供更好的沉浸式体验，并在退出全屏时恢复这些 UI。