JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍

1. 方法

在 JavaScript 中，我们可以使用 requestFullscreen 方法将网页全屏。该方法是在 document 对象上定义的，通过该方法可以完全控制浏览器的全屏模式。

document.documentElement.requestFullscreen()

类似的还有其他全屏方法，如 mozRequestFullScreen、webkitRequestFullScreen、msRequestFullscreen 等。

// Firefox
document.documentElement.mozRequestFullScreen()

// Chrome、Safari
document.documentElement.webkitRequestFullScreen()

// IE 11
document.documentElement.msRequestFullscreen()

取消全屏操作需要使用 exitFullscreen 方法：

document.exitFullscreen();

2. 属性

通过 Fullscreen API 还可以获取当前全屏状态，即 document 对象的 fullscreenElement 属性。例如，以下代码片段可用于检查当前页面是否处于全屏模式：

if (document.fullscreenElement) {
  console.log("当前浏览器处于全屏模式")
} else {
  console.log("当前浏览器不处于全屏模式")
}

3. 事件

当我们进入或退出全屏时，Fullscreen API 将触发特定事件。全屏事件如下：

• fullscreenchange：当进入、退出全屏或出现导致全屏状态发生变化的错误时触发；
• fullscreenerror：当进入全屏模式失败时触发。

以下是一个示例，演示了如何使用全屏事件：

document.addEventListener("fullscreenchange", function() {
  console.log("全屏状态已更改");
});

document.addEventListener("fullscreenerror", function() {
  console.log("进入全屏模式失败");
});

4. 示例

有时候我们需要以全屏模式显示某些元素，这是一个实用的示例。以下代码演示了如何使用 JavaScript 将某个元素设置为全屏模式。

HTML 代码：

<div class="wrapper">
  <h1>示例页面</h1>
  <p>这是一个演示全屏模式的页面</p>
  <button id="fullScreenBtn">进入全屏模式</button>
</div>

JavaScript 代码：

// 获取全屏按钮
var fullScreenBtn = document.getElementById("fullScreenBtn");

fullScreenBtn.addEventListener("click", function() {

  // 获取希望进入全屏模式的元素
  var elem = document.documentElement;

  // 如果已经是全屏模式了，则退出全屏，否则进入全屏模式
  if (document.fullscreenElement) {
    document.exitFullscreen();
    fullScreenBtn.innerHTML = "进入全屏模式";
  } else {
    elem.requestFullscreen();
    fullScreenBtn.innerHTML = "退出全屏模式";
  }
});

以上就是使用 JavaScript 控制浏览器全屏模式的完整攻略。希望对你有所帮助。