How to make browser full screen using F11 key event through JavaScript

Question

I want to make my browser full screen. Same as when we do F11 key event. I found some examples such as

function maxwin() {
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript!=null) {
         wscript.SendKeys("{F11}");
    }
}

Which does not work on mozilla or any other latest browsers. Please let me know if there is any way to sort out this problem.

Thanks. (In advance.)

score 13 · Answer 1 · edited May 23 '17 at 11:46

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

Note the capital `S` in `requestFullScreen` afaik is deprecated (but possibly still in firefox) and should have a small `s`; `requestFullscreen`. This took me a while to figure out — TrySpace, May 29 '20 at 08:48

score 12 · Answer 2 · edited May 23 '17 at 12:32

12

use this code instead

var el = document.documentElement
, rfs = // for newer Webkit and Firefox
       el.requestFullScreen
    || el.webkitRequestFullScreen
    || el.mozRequestFullScreen
    || el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

Source: How to make in Javascript full screen windows (stretching all over the screen)

Works and tested on Chrome, FF10 above, IE 8 above, Safari 5..

edited May 23 '17 at 12:32

Community

1
1

answered Apr 10 '12 at 02:06

Treby

1,328
6
18
26

THANK YOU! I am running a blazor application, and this code snippet works out the box. Shot bru. – James Heffer Nov 05 '19 at 07:47
@Treby: And if we want to exit, then what will be the code?? – Ahsan Khurshid Nov 21 '19 at 11:16
Note the capital `S` in `requestFullScreen` afaik is deprecated (but possibly still in firefox) and should have a small `s`; `requestFullscreen`. This took me a while to figure out – TrySpace May 29 '20 at 08:49

score 6 · Answer 3 · answered Sep 21 '11 at 06:26

6

Not possible without native code or a browser extension. The ActiveXObject only exists in the IE browser.

answered Sep 21 '11 at 06:26

Femi

64,273
8
118
148

I wonder how much has changed since Sept. 21st, 2011? Facebook now (April 9, 2012) has a functionality to make its popovers fullscreen (at least certainly in Chrome), and I'm still certainly using the browser (and not flash) as I can "Inspect Element" and do other Chrome things.. – JayC Apr 10 '12 at 02:30
Quite true: as @Treby points out there are full-screen APIs now emerging, so this may no longer be valid. – Femi Apr 10 '12 at 04:06
Note though that the Fullscreen API and F11 are [https://bugzilla.mozilla.org/show_bug.cgi?id=794468](not the same thing). – Tgr Nov 26 '14 at 02:40
This answer is now out of date - see the other answers in this thread for solutions that use the fullscreen API. – Maximillian Laumeister Aug 30 '15 at 19:52

score -3 · Answer 4 · edited Jan 28 '13 at 07:38

-3

now a days it is possible (at least webkit browsers at safari 5, chrome 16) with the

 webkitEnterFullscreen()

Firefox 10 also works. check this link

no idea what i-e is doing in this topic

edited Jan 28 '13 at 07:38

NoNaMe

6,020
30
82
110

answered Feb 09 '12 at 11:28

longi

11,104
10
55
89

How to make browser full screen using F11 key event through JavaScript

4 Answers4

Linked