Is there any way to enable full browser 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, like opening a new window with just the page. No browser buttons, and the address bar blocked etc.

Answer:

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

As this 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.

  • Alternate Example

    This example allows you to switch 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 the full screen mode without switching, that is, the user changes to full screen but to return to the normal screen you 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:


Response credits to user @Zuul in this original StackOverflow response .

Scroll to Top