Question

实际上我希望每当我打开.html页面时，页面都应该以全屏模式自动加载。当我点击你好，但我希望它onPage加载，这是我试图使用的代码，

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

Answer 1

出于安全原因，现代浏览器不允许自动全屏显示必须首先与用户进行交互。就像点击＆＃34;你好＆＃34; - 按钮。

Answer 2

由于安全问题，javascript无法在页面加载时加载完整屏幕。即使您尝试触发超链接上的点击事件，它也会显示以下警告。

无法执行＆＃39; requestFullScreen＆＃39; on＆＃39;元素＆＃39;：API只能通过用户手势发起。

Answer 3

这是一个带有自动点击按钮 onload 的好方法......它在代码段中被阻止，因此直接插入您的代码/网站。

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

如何在页面加载时加载全屏模式

3 个答案: