Question

我正在构建一个Web应用程序，我希望我们的Web应用程序默认在浏览器中全屏打开我想，因为我们的应用程序同时在浏览器上运行，它将以全屏模式打开。我点击了按钮点击输出，但这不适用于身体的onload事件。

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>

HTML代码：这是有效的

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

但这不起作用

<body onload="show()">

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

Answer 1

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

Answer 2

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

如果您有该选项可以管理该互动，那么您可以使用jQuery fullScreen plugin

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

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

如何在全身模式下打开网页（F11功能）

2 个答案: