CODEWITHSUNDEEP
javascriptjqueryfullscreen
Can Poyrazoğlu
Can Poyrazoğlu

Reputation: 34780

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

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.

Upvotes: 33

Views: 107000

Answers (6)

Zibri
Zibri

Reputation: 9837

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**

Also:

isFullScreen=window.matchMedia('(display-mode: fullscreen)').matches;

Upvotes: 8

Jamie Barker
Jamie Barker

Reputation: 8246

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.

Upvotes: 51

Situ
Situ

Reputation: 102

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

Upvotes: 0

josh3736
josh3736

Reputation: 144912

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.

Upvotes: 8

Anuj Verma
Anuj Verma

Reputation: 2859

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.

Upvotes: -1

Daniel Pereira
Daniel Pereira

Reputation: 1785

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.

Upvotes: 1

Related Questions