运行全屏模式的网站

Question

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

我找到了一些使用 HTML5 技术的示例，但所有这些都需要通过人机交互来触发。

该网站将在电视上显示...

我已经考虑在全屏模式下使用 SWF 文件加载网站，但我不想朝这个方向发展，而是想强调使用默认模式的所有可能性 (html, css 和 javascript)

Answer 1

您不能强制网站以全屏模式显示。

如果可能的话，想象一下安全问题。
恶意网站可以 "Hijack" 计算机知识不丰富的人的桌面进行各种可疑业务。

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

我非常确定 Flash 很相似，因为它需要用户交互才能全屏显示。否则，我们会看到几乎无法关闭的全屏弹出窗口。

Answer 2

您可以使用 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 3

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

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

这不是完全可靠的，但比我发现的任何其他方法都有效。如果没有用户交互，您可能无法执行此操作，因此使用启动画面之类的东西可以最大限度地减少对更普遍接受的东西的干扰。

Answer 4

其他答案已经描述了如何以或多或少 browser-independent 的方式进入全屏。但是，仍然存在需要用户交互的问题。

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

此外，每当用户转到另一个页面时，浏览器就会离开全屏模式，即使是在同一个网站上，他也必须在每个页面上执行一些 "user interaction" 才能返回全屏模式。
这就是为什么您的网站必须是一个页面才能全屏显示的原因。

这就是我的建议：使用一个带有 隐藏 iFrame 的初始页面。

每当用户点击任何地方或按下任何键时，只需将此 iFrame 设置为全屏并显示它。当您收到离开全屏模式的事件时，再次隐藏 iFrame 以显示启动画面。

默认情况下，链接在同一框架中打开，因此您将保持全屏模式，直到用户明确离开它或某些链接在新选项卡中打开。

这是一个适用于 Chrome 的示例：
（See it in action. 使用其他答案使其成为 browser-independent。）

<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' header 设置为 'sameorigin'（不允许 cross-site 嵌入）并且它停止工作。

P.S。我喜欢在浏览器中模拟 full-blown OS 的想法，在全屏模式下效果更好！ :) Change your OS!
另外，我不是网络开发人员。只是觉得这个问题调查起来会很有趣。

Answer 5

这不完全是 OP 想要的，但在我的特殊情况下，我发现 kiosk 模式和一些动态样式的组合可以工作。

我想用特定的 URL 启动浏览器并让它以全屏模式启动。该用例在带有状态屏幕的制造工厂的终端上几乎没有用户交互。上电后，它只需要显示没有交互的状态（即显示 none 配置 UI 元素，除非用户交互）。

也许，在复杂的网站上不现实，但我使用的是特定的 "pane"（本例中为 div）元素。为了专注于特定的 div，我隐藏了其他 div，并相应地设置了样式。如果碰巧有用户交互从全屏切换到全屏，我 (1) 使用常规的 myElement.*requestFullScreen() document.*exitFullscreen() 调用，(2) show/hide 另一个 div s, (3) 在下面的类之间切换：

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

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

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

运行 全屏模式的网站

Run a website in fullscreen mode

javascript

html

fullscreen

运行全屏模式的网站