【问题标题】:How to open a web page automatically in full screen mode如何以全屏模式自动打开网页
【发布时间】:2013-10-21 17:33:15
【问题描述】:

如何在全屏模式下自动打开网页?

我正在寻找一种在全屏模式下自动打开网页的解决方案,而无需用户按 F11 或任何其他浏览器特定键。

我已经搜索了很多,但我找不到解决方案。

是否有脚本、库或浏览器特定的 API 可以帮助我实现这一目标?

【问题讨论】:

标签: javascript fullscreen


【解决方案1】:

通过Chrome Fullscreen APIChrome

请注意,出于 (Chrome) 安全原因,它不能自动调用或执行,必须先有来自用户的交互。 (如按钮点击、keydown/keypress 等)

addEventListener("click", function() {
    var
          el = document.documentElement
        , rfs =
               el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
    ;
    rfs.call(el);
});

Javascript Fullscreen API as demo'd by David Walsh 这似乎是一个跨浏览器解决方案

// Find the right method, call on correct element
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

【讨论】:

    【解决方案2】:

    仅适用于 IE:

    window.open ("mapage.html","","fullscreen=yes");  
    window.open('','_parent','');  
    window.close();
    

    【讨论】:

      【解决方案3】:

      最好自己尝试模拟一个网络浏览器。你不必拘泥于Chrome或IE之类的东西。

      如果你使用 Python,你可以试试 pyQt4 包,它可以帮助你模拟一个网络浏览器。 这样做不会有任何安全原因,您可以将网络浏览器设置为自动以全屏模式显示。

      【讨论】:

        【解决方案4】:

        您可以通过输入以下代码自动进入全屏:

        var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() }
        

        演示:https://codepen.io/ConfidentCoding/pen/ewLyPX

        注意:出于安全原因,并不总是有效。但它至少对我有用。检查和粘贴代码时不起作用。

        【讨论】:

        • 除了“并不总是有效”之外,您可能应该提供更多信息。什么时候不起作用?为什么?
        【解决方案5】:
        查看完整尺寸的页面 (功能 () { var viewFullScreen = document.getElementById("view-fullscreen"); 如果(viewFullScreen){ viewFullScreen.addEventListener("点击", function () { var docElm = document.documentElement; 如果(docElm.requestFullscreen){ docElm.requestFullscreen(); } 否则如果(docElm.mozRequestFullScreen){ docElm.mozRequestFullScreen(); } 否则如果(docElm.webkitRequestFullScreen){ docElm.webkitRequestFullScreen(); } }, 错误的); } })();

        <div class="container">      
                    <section class="main-content">
                                            <center><a href="#"><button id="view-fullscreen">view full size page large</button></a><center>
                                                   <script>(function () {
            var viewFullScreen = document.getElementById("view-fullscreen");
            if (viewFullScreen) {
                viewFullScreen.addEventListener("click", function () {
                    var docElm = document.documentElement;
                    if (docElm.requestFullscreen) {
                        docElm.requestFullscreen();
                    }
                    else if (docElm.mozRequestFullScreen) {
                        docElm.mozRequestFullScreen();
                    }
                    else if (docElm.webkitRequestFullScreen) {
                        docElm.webkitRequestFullScreen();
                    }
                }, false);
            }
            })();</script>
                                                   </section>
        </div>

        在此处查看演示 clcik demo of click to open page in fullscreen

        【讨论】:

          【解决方案6】:
          window.onload = function() {
              var el = document.documentElement,
                  rfs = el.requestFullScreen
                  || el.webkitRequestFullScreen
                  || el.mozRequestFullScreen;
              rfs.call(el);
          };
          

          【讨论】:

          • 我怀疑这会有所帮助,甚至根本没有用。为了说服我,请解释一下你的意思是如何工作和解决问题。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2012-03-21
          • 1970-01-01
          • 2016-02-15
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多