javascript - How do i load the full screen mode on page load - Stack Overflow

admin管理员组

文章数量:1307078

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

Share Improve this question Follow asked Feb 23, 2016 at 7:31 swapswap 6311 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

本文标签： javascriptHow do i load the full screen mode on page loadStack Overflow