Go fullscreen on autoclick button

Question

I have to make when the page load the browser should go Fullscreen by autoclicking the button on the webpage.

I have this code for fullscreen:

 /* Get the element you want displayed in fullscreen */ var elem = document.documentElement; /* Function to open fullscreen mode */ function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } /* Function to close fullscreen mode */ function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } // Events var output = document.getElementById("myButton"); document.addEventListener("fullscreenchange", function() { output.innerHTML = "fullscreenchange event fired!"; }); document.addEventListener("mozfullscreenchange", function() { output.innerHTML = "mozfullscreenchange event fired!"; }); document.addEventListener("webkitfullscreenchange", function() { output.innerHTML = "webkitfullscreenchange event fired!"; }); document.addEventListener("msfullscreenchange", function() { output.innerHTML = "msfullscreenchange event fired!"; });

 <button id="myButton" onclick="openFullscreen()">Go Fullscreen</button>

Answer 1

The method requestFullscreen can only be called in response to a user-interaction or if the device-orientation changes.

See the note below the docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen

The function also returns a Promise which will be rejected if the request fails:

document.requestFullscreen().then(() => {
   // Fullscreen mode is active
}).catch(err => {
   alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});

So it's at least required to interact with the page, without it any page could go into fullscreen-mode without the user's "permission".

Answer 2

You can use a plugin named jQuery Fullscreen, it allows you to open any element on the page in fullscreen mode without using Flash in all modern browsers (Firefox, Chrome, Safari, Opera). If this feature is not supported by the browser then the element will be just stretched to fill the screen without switching to fullscreen.

Download the plugin here

Demo of this plugin here