如何使用 JavaScript 实现全屏 (Fullscreen API) 模式？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

// www.javascriptcn.com code example
function toggleFullscreen(element) {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

// 使用示例：
// 获取需要全屏的元素
const targetElement = document.getElementById('your-element-id');
// 添加事件监听器，例如点击按钮触发全屏
document.getElementById('fullscreen-button').addEventListener('click', () => {
    toggleFullscreen(targetElement);
});

本题详细解读

全屏 API 简介

全屏 API 允许 Web 应用将指定的 HTML 元素设置为全屏显示，从而提供更加沉浸式的用户体验。它主要涉及到以下几个核心概念：

进入全屏： 通过调用元素的 requestFullscreen() 方法，可以请求将该元素全屏显示。需要注意的是，这个方法需要用户交互触发，例如点击事件。
退出全屏： 通过调用 document.exitFullscreen() 方法，可以退出全屏模式。
全屏元素： document.fullscreenElement （以及其他浏览器前缀版本）属性用于获取当前处于全屏模式的元素。如果没有元素处于全屏模式，则返回 null。
全屏切换事件： 可以监听 fullscreenchange 事件，以便在全屏模式切换时执行相应的操作。

代码实现详解

`toggleFullscreen(element)` 函数

这个函数的核心作用是实现全屏模式的切换，它接收一个 HTML 元素作为参数。

检查当前全屏状态
```
 if (!document.fullscreenElement &&    
    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement )
```
这段代码的目的是兼容不同浏览器的前缀写法，检查当前是否有元素处于全屏模式。如果没有，则进入全屏模式；否则，退出全屏模式。

进入全屏

// www.javascriptcn.com code example
if (element.requestFullscreen) {
      element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
  }

这段代码用于兼容不同浏览器对 requestFullscreen 方法的不同前缀写法，尝试调用对应的全屏方法。

退出全屏

// www.javascriptcn.com code example
if (document.exitFullscreen) {
      document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
  }

这段代码用于兼容不同浏览器对 exitFullscreen 方法的不同前缀写法，尝试调用对应的退出全屏方法。

使用示例

获取目标元素：
```
const targetElement = document.getElementById('your-element-id');
```
首先，通过 document.getElementById() 方法获取需要设置为全屏的 HTML 元素。
添加事件监听器：
```
  document.getElementById('fullscreen-button').addEventListener('click', () => {
    toggleFullscreen(targetElement);
  });
```
然后，为触发全屏的按钮添加点击事件监听器，并在点击时调用 toggleFullscreen() 函数，将目标元素设置为全屏或退出全屏。

浏览器兼容性

全屏 API 的浏览器兼容性已经很好，但仍然需要考虑不同浏览器前缀的支持：

标准 API: requestFullscreen, exitFullscreen, fullscreenElement
Mozilla Firefox: mozRequestFullScreen, mozCancelFullScreen, mozFullScreenElement
Webkit (Chrome, Safari): webkitRequestFullscreen, webkitExitFullscreen, webkitFullscreenElement
Internet Explorer & Edge: msRequestFullscreen, msExitFullscreen, msFullscreenElement

代码中已考虑了这些前缀，以确保在不同浏览器上的正常运行。

注意事项

用户交互触发： 全屏请求必须由用户交互触发，例如点击事件，否则会被浏览器阻止。
权限请求： 有些浏览器可能会提示用户授权是否允许全屏。
CSS 样式: 全屏元素默认会被设置为 position: fixed; top: 0; left: 0; width: 100%; height: 100%;，可以使用 CSS 定制全屏元素的样式。
全屏 API 事件: 可以监听 fullscreenchange 和 fullscreenerror 事件来处理全屏状态的变更和错误。

如何使用 JavaScript 实现全屏 (Fullscreen API) 模式？