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

How do i load the full screen mode on page load

本文关键字：加载 模式      更新时间：2023-09-26

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

<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 无法在页面加载时加载全屏。即使您尝试在超链接上触发单击事件，它也会显示以下警告。

无法在"元素"上执行"requestFullScreen"：API 只能通过用户手势启动。

这是加载自动单击按钮的好方法...它在代码段中被阻止，因此请直接插入您的代码/网站。

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

相关文章：