Set Window to Fullscreen (Real Fullscreen; F11 Functionality) by JavaScript

Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript

This is now possible in the latest versions of Chrome, Firefox and IE(11).

Following the pointers by Zuul on this thread, I edited his code to include IE11 and the option to full screen any element of choice on your page.

JS:

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

HTML:

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

Where "document.body" is any element you so wish.

Also note that trying to run these full screen commands from the console do not appear to work on Chrome or IE. I did have success with Firebug in Firefox though.

One other thing to note is that these "full screen" commands don't have a vertical scrollbar, you need to specify this within the CSS:

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

The "!important" seems to be necessary for IE to render it

Here's an example of it working.

A quick note for anyone wanting to edit this and turn it into a code snippet, don't bother. The code doesn't work from within SO code snippets because it puts it within an iframe.

How to make the window full screen with Javascript (stretching all over the screen)

This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

Fullscreen API not working if triggered with F11

It seems impossible as of now.

See this question that was asking exact same thing.
But it's an evolving situation that deserves being revisited from time to time, so here are some details I gathered.

One comment there said:

This fullscreen window mode is OS dependent, only at an app level, and not tied to any API available to us poor web-devs. [...] You won't find any cross-browser/cross-OS hack (I don't even know any for my own browser/OS). The only way you could get something would be through [a] more powerful API, giving you an application access to the browser's window.

The API that allows to programmatically control fullscreen state is defined in fullscreen spec, and I was hoping it would shed light on the issue. Browsers do not fully implement it yet (e.g. document.exitFullscreen() is not implemented in Chrome and document.webkitExitFullscreen() does not return a Promise), but it gives hints about where things are going. Unfortunately it does not mention the pre-existing full-screen browser feature (the one triggered by F11), so it's difficult to say how this would evolve.

For now, F11-fullscreen and programmatic-fullscreen are 2 different things, although not entirely isolated from one another. Also, on macOS for example, browser's "full screen" feature is completely different, as it does take the whole screen but can still leave address bar and/or tabs shown.

If you check this demo page for a library that wraps browser-specific implementations, you can see that:

• When programmatically setting body or any element fullscreen, the browser applies special CSS rules (e.g. background becomes black).
• This does not happen with F11-fullscreen
• This also does not happen with programmatic fullscreen on document (document.documentElement), so that's the closest you can get from F11-fullscreen.

But that does not make F11-FS and programmatic-FS-on-doc-element equivalent:

• animated transitions are different (and actually a bit clunky for example on Firefox and programmatic-fullscreen on document element, as it fades to black in anticipation of black background, but there is no black background when fullscreened element is document, as stated above)
• When F11-fullscreened, document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) is false, but true when programmatic-fullscreen-on-document-element (verified on Chrome & Firefox & IE11)
• F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen.

So, what should we do then?

Since there are 2 different features, maybe it's OK to leave them be: if users enter F11-fullscreen, they will know how to exit by just pressing the same key again. If they enter programmatic-fullscreen with your UI controls, make sure you make it as obvious how to exit. It might be (understandably) frustrating as a dev not to be able to control both 100%, but in practice users will probably be fine, as they will use one or the other.

Put browser full screen and refresh on button click (simulate F11) JavaScript

maybe this can help you example of full screen using the blog post Native Fullscreen JavaScript API (plus jQuery plugin)

Change Window State to Fullscreen

You can't and you shouldn't do this.

• You shouldn't do this, because it is a annoying user experience. So let the user decide and maybe ask him to press the button for fullscreen mode, but never force him.
• You can't because the browser vendors disabled this feature for the reasons of my last point.

Minimal workarround would be to set the window size of the new window to something close to the screen resolution, but this could be tricky if the user has a dual screen.

onclick go full screen

It's possible with JavaScript.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

(Javascript) onkeydown doesn't work when press F11 to exit full screen?

Chrome intentionally prevents any keyboard event listeners from firing when F11 is pressed when the browser is in "full screen mode." This is to prevent malicious JavaScript from preventing the client from leaving "full screen mode."

Firefox does not have the same limitation; it will work just fine there.

---

Related Topics