Is there any way to enable browser full screen with JavaScript?

Question:

I notice that the main browsers are in full screen mode when pressing the F11 key, is this a functionality of the browser itself or is it possible to activate this through some JavaScript code?

If you can't do it via code, how to open a new window with just the page. No browser buttons, and address bar blocked etc.

Answer:

There is a way to simulate using the F11 key , but it cannot be automated.

As it is a feature that only the user can control, he will have to click on a button ( for example ) in order to activate the full screen mode.

  • Example toggle

    This example allows switching between full screen and normal browser window by clicking on the same element.

    action button

     <input type="button" value="clique para alternar" onclick="toggleFullScreen()">

    Occupation

     function toggleFullScreen() { if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { if (document.documentElement.requestFullScreen) { document.documentElement.requestFullScreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullScreen) { document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } }
  • Example Switch to Full Screen

    This example allows activating full screen mode without switching, that is, the user switches to full screen but to return to normal screen he will have to use the F11 key:

    action button

     <input type="button" value="clique para ativar tela cheia" onclick="requestFullScreen()">

    Occupation

     function requestFullScreen() { var el = document.body; // Supports most browsers and their versions. var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; if (requestMethod) { // Native full screen. requestMethod.call(el); } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } }

Sources and useful information I found on this subject:


Answer credits to user @Zuul in this original StackOverflow answer .

Scroll to Top