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

No. Older versions of IE (≤6) allowed it, but this functionality is seen as a security problem, so no modern browser allows it.

You can still call window.open(url,'','fullscreen=yes'), which gets you 90% of the way there, but has slightly different results:

  • IE opens a window with only titlebar and URL bar. The window is sized to fill the entire screen, and covers the Windows taskbar.
  • Mozilla also opens a window with only titlebar and URL bar. However, the new window inherits the opening window's dimensions. If the opening window is maximized, the new window is opened maximized. (The taskbar is not covered.)
  • Chrome also opens a window with only titlebar and URL bar. The new window inherits the opening window's dimensions, but it is never opened maximized (even if the opening window is maximized).

This is as close as you'll get with JavaScript. Your other option would be to build something in Flash (ugh!), or just have your "fullscreen" button pop up a lightbox that says "Press F11 to go fullscreen", and hide the lightbox on window.resize or clicking a cancel button in the lightbox.

Edit: A proper fullscreen API (first proposed by Mozilla and later released as a W3C proposal) has been implemented by Webkit (Safari 5.1+/Chrome 15+) and Firefox (10+). A brief history and usage examples here. Note that IE10 will allegedly not support the API.


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.


I wonder why nobody noticed that all answers are wrong.

Setting the body element to full screen does not have the same behaviour of pressing F11.

The same behaviour of F11 can be obtained by:

document.documentElement.requestFullScreen();   // on

and

document.cancelFullScreen();  // off

also to check if we are in full screen mode I use this line:

isFullScreen=()=>!(document.currentFullScreenElement==null)

this also detects if fullScreen was invoked by F11:

isFullScreen=(document.documentElement.clientWidth==screen.width && document.documentElement.clientHeight==screen.height)

Note: this must be called from within a user interaction event (onclick, onkeydown, etc).

Note 2: when the user presses F11 no "element" is really set in full screen so the only way to detect that is to intercept the keyboard with an eventlistener or to check if the client dimensions are the same of the screen dimensions**


You can do this with a signed java applet that has permission to run an automation script to issue the keystroke to go into fullscreen mode. But, this is a total hack that wouldn't be very practical unless your users don't mind your site manipulating their machines.

Tags:

Javascript

Jquery

Fullscreen

Recent Posts