使用JavaScript在浏览器中进入和退出全屏模式

Question

我正在使用Chrome，想要完成一个简单的任务。使用代码退出全屏，而不是按下 F11 键。

以下是一些关于如何实现它的文档：

• https://www.w3schools.com/jsref/met_element_exitfullscreen.asp
• https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

以上方法都不起作用。在 Stack Overflow 上也有很多无效的答案。请帮忙，我真的需要解决这个问题。

---

这里是 CodePen。

以下是我的代码：

const button = document.getElementById('exitId');
button.addEventListener("click", function(){
  // JavaScript Code To Exit Fullscreen Goes Here
  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();
  }
  
});

<button id="exitId">Exit Fullscreen</button>  

- foxer

---

我曾经发布了一个带有代码的答案，这个代码一直在我的电脑上运行良好。但是在我发布后，我回头看了一下你的代码，发现它和我的非常相似（所以我删除了我的帖子）。你是否遇到了某个特定的浏览器无法正常工作的问题？ - kshetline

我正在使用Chrome并在Firefox中测试了代码。两者都不起作用...问题在于这种方法不起作用，我认为这是一个错误：document.webkitExitFullscreen(); - foxer

有趣的是...我刚刚发现，我的代码只有在我使用类似的代码来设置全屏模式时才能正常工作。如果使用F11建立全屏模式，则我的代码无效。 - kshetline

是的，你说得对，我的也是......但这对我来说很不幸，不太有趣 :( - foxer

还有，如果我们使用F11全屏，ESC键无法正常工作（退出全屏）！！！那里出了什么问题？！我讨厌F11... - foxer

Answer 1

一个简单的函数用于在JavaScript中切换全屏。它能在Firefox和Webkit浏览器上良好运行。

Javascript函数

/**
 * Toggle fullscreen function who work with webkit and firefox.
 * @function toggleFullscreen
 * @param {Object} event
 */
function toggleFullscreen(event) {
  var element = document.body;

  if (event instanceof HTMLElement) {
    element = event;
  }

  var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;

  element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function() {
    return false;
  };
  document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function() {
    return false;
  };

  isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}

<button onclick="toggleFullscreen();">Full Screen</button>

- Lyn Robert

Answer 2

请注意，如果要使用JavaScript退出全屏模式，则必须使用JavaScript进入全屏模式。如果全屏模式基于F11键，则无法使用JavaScript退出全屏模式。

原因是当您使用JavaScript进入全屏模式时，实际上是将文档的特定部分移动到全屏模式（而不是整个应用程序），而当您处于应用程序全屏模式下时，整个应用程序都在全屏模式下。

如果您处于全屏状态（应用程序级别），则仍可以看到其他选项卡。如果您处于文档/元素全屏模式下，则没有选项卡/ URL / 书签栏等。

请检查以下代码：

<div id="container">  
  <button id="toggle">Toggle Fullscreen</button>
</div>

====

button.addEventListener("click", function() {
    if (document.fullscreenElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        if (!document.mozFullScreen && !document.webkitFullScreen) {
            if (container.requestFullscreen) {
                container.requestFullscreen();
            }
            else if (container.mozRequestFullScreen) {
                container.mozRequestFullScreen();
            }
            else if (container.webkitRequestFullScreen) {
                container.webkitRequestFullScreen();
            }
            else if (container.msRequestFullscreen) {
                container.msRequestFullscreen();
            }
        }
    }
});

您可以在这里查看一个工作的解决方案: https://jsfiddle.net/zpdwL8gt/4/

已在 MacOS 上的 Firefox 和 Chrome 上进行了检查

- Dekel

---

在你的代码中使用F11进入全屏模式，然后尝试使用按钮切换全屏模式，你会发现它不起作用... - foxer

如果您是使用JavaScript进入全屏模式，那么只能使用JavaScript切换关闭全屏。我不确定为什么您决定对答案进行负投票。我会添加一条关于此的注释。 - Dekel