在 JavaScript 中获取全屏窗口

Kushank Singh 2023年10月12日

JavaScript

在本教程中，我们将学习如何使用 JavaScript 获取全屏窗口。

全屏 API 帮助我们使用 JavaScript 代码将网页转换为全屏模式。我们可以将它应用于整个文档或单个元素。

检查下面的示例。

function getFullscreenElement() {
  return document.fullscreenElement        // standard property
      || document.webkitFullscreenElement  // safari/opera support
      || document.mozFullscreenElement     // firefox support
      || document.msFullscreenElement;     // ie/edge support
}
function toggleFullscreen() {
  if (getFullscreenElement()) {
    document.exitFullscreen();
  } else {
    document.getElementById('container')
        .getFullscreenElement()
        .catch(console.log);
  }
}

在上面的代码中，getFullscreenElement() 函数中有四个不同的选项，例如 document.fullscreenElement、document.webkitFullscreenElement、document.mozFullscreenElement 和 document.msFullscreenElement，它们使全屏命令与几乎所有浏览器兼容。

toggleFullscreen() 使窗口进入非全屏模式的全屏模式，反之亦然，通过单击 Enter Full-Screen 按钮。我们可以通过以下方式在给定元素上调用此函数。

document.getElementById('button').addEventListener('click', () => {
  toggleFullscreen();