0

It's not working fullscreen when triggering a click. It opens the new page when I clicked the Icon or image. The new page shows fullscreen without any click, but it's not changed the full screen.

<button id="test" onclick="launchFullscreen(document.documentElement);">Click Me</button>

var ele = document.getElementById('test');
ele.click();

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
HoJin Jeong
  • 11
  • 2
    Where do you actually call `launchFullscreen` ? – empiric Aug 23 '19 at 08:53
  • @empiric the call was hidden in the HTML which was badly formatted so it didn't appear in the question. I've edited it – Rory McCrossan Aug 23 '19 at 08:55
  • 1
    You cannot force the browse to fullscreen mode without user interaction. If you check the console you will most likely see this warning: `Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.` – Rory McCrossan Aug 23 '19 at 08:57

1 Answers1

1

In newer versions of browsers, you can use this script.

Here's how to do it:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    } }

HTML Button: <button onclick="requestFullScreen(document.body)">Go Fullscreen</button>

The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

devmonster
  • 456
  • 6
  • 20