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:
-
Mozilla Developer Network (English)
-
How to make windows full screen in JavaScript (full screen) (English)
-
How to make browser fullscreen using F11 key event via JavaScript (English)
-
Chrome Fullscreen API (English)
-
jquery-fullscreen-plugin (English)
Answer credits to user @Zuul in this original StackOverflow answer .