如何在正文加载时以全屏模式(F11 功能）打开网页

How to open Web page in Fullscreen mode (F11 functionality) on body load

本文关键字：功能 F11 网页 模式 正文 加载      更新时间：2023-09-26

我正在构建一个 Web 应用程序，我想默认在浏览器中全屏打开我们的 Web 应用程序我想要，因为我们的应用程序同时在浏览器上运行，它将以全屏模式打开。我在单击按钮时获得输出，但这不适用于正文的加载事件。

Javascript 代码：

<script>
    function show() {
        var elem = document.body;
        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();
            }
        }
    }
</script>

网页代码：这是有效的

<input type="button" value="click to toggle fullscreen" onclick="show()">

但这不起作用

<body onload="show()">

请帮助我如何实现这一目标。谢谢。

不允许在没有任何用户交互的情况下启动全屏模式。

全

屏模式需要用户交互。当用户触发任何事件(即单击、按键、按键(时，您的窗口可以进入全屏状态。

如果你有那个选项，你将能够管理该交互，那么你可以使用jQuery全屏插件。

试试这种方式：[使用用户交互]

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test iframe</title>
    // load jQuery
    <script src="./jquery-fullscreen-plugin-master/jquery-2.1.1.js"></script>
    // load jquery fullscreen plugin
    <script src="./jquery-fullscreen-plugin-master/jquery.fullscreen-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#fullscreenButton").on("click", function(){
                $("body").fullScreen(true);
            });
        });
    </script>
  </head>
  <body style="background:white">
    <button id="fullscreenButton">Go to FullScreen Mode</button>
  </body>
</html>

还有另一种方法接近你的方案。但为此，您必须让浏览器中允许恶意脚本(在您的情况下为自动全屏(。

javaScript ：

var height = window.screen.availHeight;
var width = window.screen.availWidth;
for(var i = 0; i < 2; i++){
    window.open ("http://www.google.com/","","fullscreen=yes, width=" + width + ", height=" + height + "");
}

以下脚本将以全屏模式打开新窗口。但是第一次，它会作为您允许从您的网站弹出窗口的许可。如果您允许这些，它将始终在下次执行，直到再次被阻止。

因此，这里发生的事情是您正在获得设备的分辨率并以适当的高度和宽度打开窗口。

jsFiddle - window.open((

相关文章：