Actually i wanted that whenever i open the .html page the page should automatically load in full screen mode. It works when i click on hello but i want it onPage load, this is the code i am trying to use,

<a href="#" type="button" id="modal" onclick="launchFullscreen(document.documentElement);" >hello</a>


<script>
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();
  }
}
</script>
<script type="text/javascript">
launchFullscreen(document.documentElement);
</script>

Actually i wanted that whenever i open the .html page the page should automatically load in full screen mode. It works when i click on hello but i want it onPage load, this is the code i am trying to use,

<a href="#" type="button" id="modal" onclick="launchFullscreen(document.documentElement);" >hello</a>


<script>
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();
  }
}
</script>
<script type="text/javascript">
launchFullscreen(document.documentElement);
</script>

• javascript
• jquery
• html

3 Answers 3

Modern browsers don't allow auto full screen for security reasons.
There must be an interaction from the user first. Like clicking the "hello"-button.

Loading the full Screen on Page load cannot be performed by the javascript because of security issue .Even if you try to trigger click event on your hyperlink it will show you the following warning.

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

Here is the good method with an automatic clicking button onload... it is blocked here in the snippet, so insert direct in your code/website.

window.onload = function(){
  document.getElementById('btn').click();
  
var scriptTag = document.createElement("script");
scriptTag.src = "https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(scriptTag);
}


function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

<input id="btn" class="btn" style="float:left; opacity: 0;"  type="button" value="Full screen mode" onclick="toggleFullScreen(document.body)">