javascript - 使用javascript在浏览器中进入和退出全屏

Question

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

以下是有关如何实现它的一些文档:

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

以上方法均无效。还有很多关于 Stackoverflow 的无效答案。请帮助我真的需要解决这个问题。

Here is 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 .它在 上运行良好火狐和 网络套件 浏览器。
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>