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

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

推荐答案

-- -------------------- ---- -------
-------- ------------------------- -
  -- ---------------------------- --    -- ----------- -------- ------
      ------------------------------ -- --------------------------------- -- ----------------------------- - -  -- ------- ------- -------
    -- --------------------------- -
      ----------------------------
    - ---- -- ------------------------------ -
      -------------------------------
    - ---- -- --------------------------------- -
      ----------------------------------
    - ---- -- ----------------------------- -
      ------------------------------
    -
  - ---- -
    -- ------------------------- -
      --------------------------
    - ---- -- ------------------------------ -
      -------------------------------
    - ---- -- ------------------------------- -
      --------------------------------
    - ---- -- --------------------------- -
      ----------------------------
    -
  -
-

-- -----
-- ---------
----- ------------- - -------------------------------------------
-- ------------------
---------------------------------------------------------------------- -- -- -
    --------------------------------
---

本题详细解读

全屏 API 简介

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

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

代码实现详解

`toggleFullscreen(element)` 函数

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

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

进入全屏

-- -------------------- ---- -------
-- --------------------------- -
      ----------------------------
  - ---- -- ------------------------------ -
      -------------------------------
  - ---- -- --------------------------------- -
      ----------------------------------
  - ---- -- ----------------------------- -
      ------------------------------
  -

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

退出全屏

-- -------------------- ---- -------
-- ------------------------- -
      --------------------------
  - ---- -- ------------------------------ -
      -------------------------------
  - ---- -- ------------------------------- -
      --------------------------------
  - ---- -- --------------------------- -
      ----------------------------
  -

这段代码用于兼容不同浏览器对 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 事件来处理全屏状态的变更和错误。

纠错
反馈