2
votes

I'm using the following code below to Toggle fullscreen mode in Chrome.

It works great unless I launch Chrome with the --start-fullscreen flag. From there, it looks like it's trying to do something; the indicator changes from "Press [Esc] to Exit Full Screen" to "Press [F11] To Exit Full Screen", but the window stays in fullscreen.

I would like the application to load in full screen (e.g. on system startup), but have the ability to exit/re-enter fullscreen with a toggle button.

Any ideas?

<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
have you checked this stackoverflow.com/questions/2863351/… ? i am not sure if you already saw it but it might give you an insight on somethingrule
@rule I did verify that the script successfully identifies that the window is in fullscreen mode. The problem is that when launched with the aforementioned flag, the document.exitFullscreen() call has no effect.bstiffler582
@bstiffler582 Did you find any solutions? I'm facing the same issue.N.F.
@N.F. unfortunately not. I believe we ended up using kiosk mode for this application, which came with its own headaches...bstiffler582

1 Answers

1
votes

I have been playing around with this today and found that you cannot programmatically exit fullscreen mode if it was not enabled by your own site with requestFullscreen. You can toggle fullscreen on a click event, and detect fullscreen events that are triggered when F11 is pressed, but if you try to call document.exitFullscreen() without having called requestFullscreen in the first place it will throw an error.

This does not make sense at first but there is thought behind it. A user is able to enable fullscreen mode in their browser at any time by pressing F11, and also start the browser with a --start-fullscreen flag. With the browser in fullscreen mode they can navigate to any website, they're not just stuck on yours. It then makes sense that a browser would not allow a site to disable a user's fullscreen mode programmatically and disrupt their settings.