Set window to fullscreen (REAL fullscreen; F11 fun

Question

There are several questions about this, some say it's not possible, some say it IS possible in IE such as Internet Explorer full screen mode? and I'm wondering a universal solution and an answer for this.

I'm building a photo gallery webpage, and the gallery really makes out a difference when viewed fullscreen (as the title says, I am talking about true fullscreen, not with bars and window chrome etc), and I would like to place a button for fullscreen. (no, I won't be going forcefully FS without user's intention, I hate that kind of "functionality" too) It IS possible in Flash when initiated through a user-initiated action such as button click, and I was wondering if such a thing is available for Javascript too. Logically, it should have a mechanism similar to Flash/SL user initiated fullscreen mode. If there's no "universal" functionality that will work for all, I'm ok (better than nothing) for partial functionality (I mean supporting SOME of the browsers by that, NOT setting window width/height etc. don't come with answer telling to set window width/height, I know how to do it, I'm NOT looking for it) too.

Answer 1

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.webkitRequestFullScreen();   // on

and

document.webkitCancelFullScreen();  // off

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

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

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

Answer 2

Full screen support through java script is not implemented for Chrome or Firefox. However you can manage to have it for MSIE. But that is also not F11 kind of functionality.

Even chrome.exe -kiosk does not open page in fullscreen mode.

Reason is that it is not recommended to force user and open your application in fullscreen mode. If this is not all the popups from different websites will open in fullscreen mode and you will endup closing all those.

Answer 3

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.

Answer 4

There's an unknown library that makes all the work for you:

https://github.com/rafrex/fscreen

I had the same issue and I did (for instance in a react component):

import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

Works in Chrome, Firefox, Safari, IE11, iOS, Android

Answer 5

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.

Answer 6

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.