31

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.

Community
  • 1
  • 1
Can Poyrazoğlu
  • 29,145
  • 40
  • 152
  • 327
  • 3
    Guess what, it is not possible! :) Browser's JavaScript is locked down these days. If it was 1999, we could do it. – epascarello Aug 24 '11 at 17:17
  • 1
    possible duplicate of [Force Chrome/Firefox into Full Screen?](http://stackoverflow.com/questions/5085184/force-chrome-firefox-into-full-screen) – Chris Baker Aug 24 '11 at 17:24
  • @Chris, not really. That questions asks about preventing the user from *exiting* fullscreen mode. – josh3736 Aug 24 '11 at 17:48
  • Fair enough... but the point is that this question has been asked several times, the answer is always "No, you cannot do that unless you're making an extension". http://stackoverflow.com/search?q=firefox+full+screen – Chris Baker Aug 24 '11 at 18:03
  • @Chris: most of those questions either tell to resize window to screen width/height, or just tell it is not possible. but some sources (such as the one I've posted in the question) tell that it's possible to some extent, and I've opened the question as I thought those questions, while close, weren't answering exactly my question and I didn't want to resurrect dead topics. – Can Poyrazoğlu Aug 24 '11 at 18:10
  • The question you link to here applies to IE. As you may be aware, IE is notorious for providing functionality that no other browser does, indeed this may be one of the reasons why use of Internet Explorer has been and is generally advised against. I know I shudder in horror every time I go home and see it open on my parent's computer despite my urging to the contrary. When you take that into account, the fact that it is possible in IE should hardly lead you to believe that there's a way in other browsers and people who say otherwise just don't know the secret. It can't be done, for good reason – Chris Baker Aug 24 '11 at 18:16
  • I think the same about IE (though I think it's going in the right way now lately), but if IE can do it, I thought *maybe* others can too. The ability to do the same in Flash/SL augmented my beliefs about that maybe they are just using some browser functionality to go FS. and there can be other ways using the plugins' functionality too (yes, I agree, it DOES go off topic, maybe my initial statement about asking a javascript only solution is incorrect). – Can Poyrazoğlu Aug 24 '11 at 18:21

6 Answers6

45

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.

Community
  • 1
  • 1
Jamie Barker
  • 7,735
  • 3
  • 26
  • 62
  • This is helpful. Thanks. – Can Poyrazoğlu Aug 11 '14 at 18:08
  • Gone through almost all the related threds. Saved my day. Thanks :) – Mr.7 Nov 23 '17 at 10:42
  • 2
    If you want to keep the body scrollbar and background, you can try to apply the toggleFullScreen function on document.documentElement instead of document.body. – Max Jan 09 '18 at 13:55
  • 1
    Woot! Another frontend dev called Jamie Barker! We should have a beer if your ever in New Zealand bro. Cheers! – Jamie Barker Dec 07 '18 at 05:53
  • Any possible at body onload method? –  Oct 11 '19 at 07:07
  • @ImamSathikN Not sure, browsers appear to nail it down to require a user to interact with the website in some fashion in order to go into full screen mode. To prevent it being abused to force people into unawares I guess. – Jamie Barker Oct 16 '19 at 14:23
  • This is NOT what the Threadmaster asked for... it's just a browser simulated Fullscreen, you are not able to click through pages among DOM.. give it a try: Open a website with Firefox, hit the F11 button til your fingers bleed and navigate through a website. You notice, that your Site stays in FullScreen until you hit F11 again until your fingers are half their height. – Kerim Yagmurcu Nov 08 '19 at 23:34
  • Is it only for me or when i use this code the background color turns black.. – Dexter Aug 18 '20 at 09:13
  • @Dexter it probably depends upon what you are trying to full screen. Send me a working example and I can take a look and see what the issue is. – Jamie Barker Aug 18 '20 at 16:05
8

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.

josh3736
  • 124,335
  • 26
  • 203
  • 248
  • thanks for the clarification. so can Flash or Silverlight control the window to go fullscreen somehow? just like sometimes a hidden flash object in a page is used on some sites to perform otherwise impossible (without flash) operations, looking for something like that... – Can Poyrazoğlu Aug 24 '11 at 18:07
  • @can: No. When Flash/Silverlight goes fullscreen, the plugin creates *its own window* which it handles outside of the browser's knowledge. The plugin never has control over the original browser window. – josh3736 Aug 24 '11 at 18:11
  • well, I just got the "hacky" idea, where I could put a silverlight "button" and upon click, that would go FS itself, creating a web browser control taking up 100% of the space, and loading the URL of the current page inside itself. but i think it would restrict too as it won't run inside the browser window, but maybe it works in fullscreen, worth a try. – Can Poyrazoğlu Aug 24 '11 at 18:15
  • @can: [Silverlight does not allow a WebBrowser control in browser-based applications.](http://msdn.microsoft.com/en-us/library/system.windows.controls.webbrowser(v=vs.95).aspx) – josh3736 Aug 24 '11 at 18:20
  • does "inside the browser" apply to fullscreen mode too? it is not really "in" the browser, it creates its own window as you've said, so maybe it works in fullscreen, and I only need it in fullscreen anyway so it may help my problem if I can interact with the mouse. – Can Poyrazoğlu Aug 24 '11 at 18:28
  • It's an origin policy. That means that a Silverlight app *hosted* on (embedded in) a webpage cannot use the WebBrowser control, regardless of whether you use fullscreen mode. Also, MSDN says, *when you are using the WebBrowser control in a Silverlight application in full-screen mode, the WebBrowser is not interactive*, so you're still stuck. – josh3736 Aug 24 '11 at 18:35
  • well, ok, I apparently cannot achieve it, i give up :) but thanks for clarifying again. – Can Poyrazoğlu Aug 25 '11 at 01:13
  • @canpoyrazoğlu: The fullscreen situation has changed recently. See edits. – josh3736 Nov 28 '11 at 03:22
  • On mobile it keeps asking to show the popup or not, Like a loop –  Jul 20 '18 at 17:25
5

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

Zibri
  • 7,056
  • 2
  • 42
  • 38
  • it must be called from inside an event like a mouse click or a keydown. it works on mobile chrome too... – Zibri Aug 05 '18 at 12:18
  • I am not sure this is true, at least not for Chrome 71. document.documentElement.webkitRequestFullScreen() returns an error: TypeError: Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object. [Others have the same problem](https://community.ubnt.com/t5/UniFi-Video/Chrome-71-Fullscreen-doesn-t-work/m-p/2583406). But pressing F11 still works. – Weihui Guo Dec 21 '18 at 17:34
  • I am running Version 71.0.3578.98 (Official Build) (64-bit) And it works even in the javascript console (you can pop it up pressing control+shift+j) and if you write "document.documentElement.webkitRequestFullScreen();" it will INDEED go full screen. In a normal program anyway must be inside a onclick or onkeydown or similar event. – Zibri Dec 22 '18 at 12:06
  • Funnily enough, passing `document.documentElement` into the function in my answer works just fine. At least on Chrome anyway considering your answer only targets Webkit browsers. In effect you've just duplicated my answer for one particular browser. Surely it would have been more helpful to the community to add a comment to my answer suggesting people use `document.documentElement` rather than `document.body` in my **example**. This is _assuming_ it works in all browsers and not just Chrome though. – Jamie Barker Jan 02 '19 at 11:25
  • @JamieBarker nope. document.documentElement.requestFullscreen() works the same. The **key** of my answer is **document.documentElement**, obviously if I put that in any other answer they will all become **my answer** :P – Zibri Dec 01 '19 at 09:33
1

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.

Daniel Pereira
  • 1,767
  • 12
  • 10
  • java applet is "too" hacky, a script method is more preferable, but if I can do it using Flash (or less preferably, silverlight as it's still less common), that would also be a solution, but of course, the object will only be used to fullscreen the browser window and nothing else – Can Poyrazoğlu Aug 24 '11 at 17:31
0

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

Lluís Marfany
  • 102
  • 8
-1

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.

Anuj Verma
  • 1,309
  • 1
  • 10
  • 21