退出Chrome全屏-从JavaScript启动全屏

时间:2019-11-05 15:39:13

标签: javascript google-chrome fullscreen

我正在使用以下代码在Chrome中切换全屏模式。

除非我使用--start-fullscreen标志启动Chrome,否则它会很好用。从那里看来,它正在尝试做某事;指示器从“按[Esc]退出全屏”变为“按[F11]退出全屏”,但窗口保持全屏。

我希望该应用程序以全屏方式加载(例如,在系统启动时加载),但是可以通过切换按钮退出/重新进入全屏模式。

有什么想法吗?

<html>
<head>
</head>
<body>
<input type="button" value="Toggle Fullscreen" onclick="ToggleFs()"></input>
<script type="text/javascript">
var ToggleFs = function() {
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitCancelFullscreen) {
            document.webkitCancelFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我今天一直在玩这个,发现如果您自己的网站没有使用 requestFullscreen 启用全屏模式,您将无法以编程方式退出全屏模式。您可以在点击事件上切换全屏,并检测按下 F11 时触发的全屏事件,但如果您尝试调用 document.exitFullscreen() 而没有首先调用 requestFullscreen,它将引发错误。

这起初没有意义,但背后有想法。用户可以随时按 F11 在浏览器中启用全屏模式,还可以使用 --start-fullscreen 标志启动浏览器。浏览器处于全屏模式时,他们可以导航到任何网站,而不仅仅是停留在您的网站上。因此,浏览器不允许网站以编程方式禁用用户的全屏模式并破坏他们的设置是有道理的。