Question

我正在寻找一种技巧，让我的网站在没有人工干预的情况下进入全屏模式。

我发现了一些使用HTML5技术的例子，但所有这些都需要通过人工互动来触发。

本网站将在电视上播放......

我已经考虑过在全屏模式下使用SWF文件加载网站，但我不想使用默认模式（html，css和javascript）来强调所有可能性

Answer 1

您无法强制网站以全屏模式显示。

想象一下如果可能的安全问题。
恶意网站可以“劫持”一个知识较少的人的桌面，用于各种可疑的业务。

JS全屏api的所有都会抛出这样的错误：
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." 如果您尝试从代码中调用它。

我非常相信Flash很相似，因为它需要用户互动才能全屏显示。否则，我们已经看到了我们公平分享的全屏弹出窗口几乎无法关闭。

Answer 2

其他答案已经描述了如何以与浏览器无关的方式全屏显示。但是，仍然存在需要用户交互的问题。

出于安全原因，您无法强制您的网页以全屏模式显示。此时需要用户交互。

此外，每当用户访问另一个页面时，即使在同一个网站上，浏览器也会离开全屏模式，并且他将不得不执行某些用户交互＆＃34;在每个页面上返回全屏模式。
这就是为什么您的网站必须是单页才能全屏显示的原因。

这就是我的建议：使用单个启动页面，其中包含隐藏的iFrame 。

每当用户点击任意位置或按任意键时，只需将此iFrame设置为全屏并显示即可。当您在离开全屏模式时收到活动时，请再次隐藏iFrame以显示启动。

默认情况下，链接在同一帧中打开，因此您将保持全屏模式，直到用户明确地将其保留或在新标签页中打开某些链接。

以下是适用于Chrome的示例：
（See it in action.使用其他答案使其与浏览器无关。）

<html>
<head>
    <script language="jscript">
        function goFullscreen() {
            // Must be called as a result of user interaction to work
            mf = document.getElementById("main_frame");
            mf.webkitRequestFullscreen();
            mf.style.display="";
        }
        function fullscreenChanged() {
            if (document.webkitFullscreenElement == null) {
                mf = document.getElementById("main_frame");
                mf.style.display="none";
            }
        }
        document.onwebkitfullscreenchange = fullscreenChanged;
        document.documentElement.onclick = goFullscreen;
        document.onkeydown = goFullscreen;
    </script>
</head>
<body style="margin:0">
    <H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
    <iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>

但请注意，网站通常不允许嵌入，例如显示在iframe中。该示例最初使用W3Schools网站而不是Python文档，但他们设置了X-Frame-Options＆＃39;标题为＆＃39; sameorigin＆＃39; （禁止跨站点嵌入）它停止工作。

P.S。我喜欢在浏览器中模拟完整的操作系统的想法，而且它在全屏模式下甚至更好！ :) Change your OS!
另外，我不是网络开发人员。只是觉得这个问题很有意思。

Answer 3

您可以使用https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode中所述的requestFullScreen（）方法。

注意：这仍然需要用户输入 - 但请避免使用闪光灯。

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

toggleFullScreen();

这允许页面全屏激活，并且可能通过javascript页面上的页面加载来激活。但是，不支持旧浏览器。

Answer 4

当我需要做类似的事情时，我使用了闪屏。继续进入全屏模式的按钮请求它作为JS pop的属性：

 onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"

这不是全面的，但比我找到的任何其他方法都更好。如果没有用户交互，您可能无法做到这一点，因此使用类似启动画面的内容可以最大限度地减少对更常见的内容的侵扰。

Answer 5

这并不是OP正在寻找的东西，但在我的特殊情况下，我发现了自助服务终端模式和一些动态样式的组合。

我希望启动一个具有特定网址的浏览器，并让它以全屏模式启动。用例在具有状态屏幕的制造工厂中的终端上几乎没有用户交互。上电后，它只需要显示没有交互的状态（即，除非用户进行交互，否则不显示配置UI元素）。

也许，在复杂的网站上不现实，但我的使用是一个特殊的＆＃34;窗格＆＃34; （在这种情况下为div）元素。为了专注于特定的div，我隐藏了其他div，并相应地设置了样式。如果碰巧有用户交互从全屏变化到全屏，我（1）使用常规myElement。* requestFullScreen（）文件。* exitFullscreen（）调用，（2）显示/隐藏其他div，以及（3）切换下面的课程之间：

.right-pane-fullscreen
{
    margin-left: 0px;
}

.right-pane-normal
{
    margin-left: 225px;
}

有关如何在Chrome中使用自助服务终端模式的相关讨论（请注意，在启动自助服务终端模式之前运行的其他Chrome进程可能会阻止此工作） Opening Chrome browser in full window or kiosk mode on windows 7

以全屏模式运行网站

5 个答案: