Menu
How can I enter full screen mode using just Javascript/JQuery code? The goal is to enter fullscreen mode like when you press F11 in the browser, but then programmatically.
910
Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button. It is also possible to make a specific element in the page to enter and exit full-screen mode programmatically using Javascript Fullscreen API.
You can activate full screen mode using vanilla JavaScript without jQuery.
<!DOCTYPE html> <html> <head> <title>Full Screen Test</title> </head> <body id="body"> <h1>test</h1> <script> var elem = document.getElementById("body"); elem.onclick = function() { req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen; req.call(elem); } </script> </body> </html> One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action[1] (e.g. on page load).
Here is a cross browser function to toggle full screen mode (as obtained from the MDN):
function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } } For more information, check out the MDN page on full screen APIs.
125
Here's a working demo for making the browser full screen
http://johndyer.name/lab/fullscreenapi/
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
