CODEWITHSUNDEEP
javascriptjqueryhtml
swap
swap

Reputation: 63

How do i load the full screen mode on page load

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>

Upvotes: 2

Views: 6236

Answers (3)

Cudex
Cudex

Reputation: 49

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.com/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)">

Upvotes: 1

Rajat Bhadauria
Rajat Bhadauria

Reputation: 260

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.

Upvotes: 3

arc
arc

Reputation: 4691

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.

Upvotes: 5

Related Questions