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

afdcj2ne  于 2023-04-27  发布在  Go
关注(0)|答案(2)|浏览(379)

我正在使用Chrome浏览器,我想要一个简单的任务。退出全屏使用代码,而不是F11按键。
以下是一些关于如何实现它的文档:

上面的方法都不起作用。在Stack Overflow上也有很多不起作用的答案。请帮助,我真的需要解决这个问题。
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>
tf7tbtn2

tf7tbtn21#

一个简单的函数JavaScript中切换全屏,在FirefoxWebkit浏览器上运行良好。

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

yws3nbqq2#

请注意,为了退出全屏使用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/
检查Firefox和Chrome @ MacOS

相关问题