使用 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>  

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>

Answer 2

请注意，为了使用 javascript 退出全屏 - 您还必须使用 javascript 进入全屏模式。如果全屏基于 F11 - 将无法使用 javascript 退出它。

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

如果您处于全屏状态（应用程序方面），您仍然会看到其他选项卡。如果您处于文档/元素全屏模式 - 则没有选项卡/网址/书签栏等。

检查以下代码：

<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/

在 Firefox 和 chrome @ MacOS 上检查