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>

Welcome to Stackoverflow, Adnail. Can you add a minimal example to your question, please, and explain how it doesn't accomplish what you want? — dovetalk, Apr 03 '19 at 23:06
Fullscreen requires a user initiated event to initialize to prevent abuse — charlietfl, Apr 03 '19 at 23:25
Possible duplicate of [How to open a web page automatically in full screen mode](https://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode) — Stefan Blamberg, Apr 04 '19 at 00:38

score 0 · Answer 1 · answered Apr 04 '19 at 08:13

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".

score 0 · Answer 2 · answered Apr 04 '19 at 08:43

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

Go fullscreen on autoclick button

2 Answers2