以全屏模式运行网站

Run a website in fullscreen mode

本文关键字：运行 网站 模式      更新时间：2023-09-26

我正在寻找一个技巧，让我的网站处于全屏模式，而无需人工交互。

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

此网站将在电视上显示。。。

我已经考虑过在全屏模式下使用SWF文件加载网站，但与其朝着这个方向发展，我想强调的是，只使用默认模式（html、css和javascript）

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

如果可能的话，想象一下安全问题
恶意网站可以"劫持"一个不太懂电脑的人的桌面，从事各种可疑的业务。

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

我非常确信Flash是相似的，因为它需要用户交互才能实现全屏。否则，我们会看到几乎不可能关闭的全屏弹出窗口。

其他答案已经描述了如何以或多或少独立于浏览器的方式实现全屏。然而，需要用户交互的问题仍然存在。

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

此外，每当用户转到另一个页面，甚至在同一网站上，浏览器都会离开全屏模式，并且他必须在每个页面上执行一些"用户交互"才能返回全屏模式
这就是为什么你的网站必须是一个单一的页面，如果你想它是全屏的原因。

这就是我的建议：使用带有隐藏iFrame的单个起始页。

每当用户点击任何位置或按下任何键时，只需将此iFrame设置为全屏并显示即可。当您收到退出全屏模式的事件时，请再次隐藏iFrame以显示splash。

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

以下是一个适用于Chrome的示例：
（请参阅实际操作。使用其他答案使其独立于浏览器。）

<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"标头设置为"sameoorigin"（不允许跨站点嵌入），因此停止了工作。

附言：我喜欢在浏览器中模拟成熟操作系统的想法，在全屏中更棒！：）更改操作系统
此外，我不是一个网络开发人员。我只是觉得这个问题调查起来会很有趣。

您可以使用requestFullScreen（）方法，如https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.

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

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页面上的页面加载来激活。但是，不支持旧的浏览器。

当我需要做类似的事情时，我使用了一个启动屏幕。继续进入全屏模式的按钮请求将其作为JS pop:的属性

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

这不是完全证明，但比我发现的任何其他方法都有效。如果没有用户交互，你可能无法做到这一点，因此使用类似防溅屏的东西可以最大限度地减少对更普遍接受的东西的入侵。

这并不是OP想要的，但在我的特定情况下，我发现了kiosk模式和一些动态样式的组合。

我想用一个特定的URL启动一个浏览器，并让它在全屏模式下启动。该用例是在具有状态屏幕的制造工厂中的终端上几乎没有用户交互。通电后，它只需要显示状态而不需要交互（即，除非用户交互，否则不显示任何配置UI元素）。

也许，在复杂的站点上不太现实，但我使用的是一个特定的"pane"（本例中为div）元素。为了关注特定的div，我隐藏了其他div，并相应地设置了样式。如果碰巧有用户交互从和变为全屏，我（1）使用常规的myElement.*requestFullScreen（）文档.*exitFullscreen（）调用，（2）显示/隐藏其他div，（3）在下面的类之间切换：

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

关于如何在Chrome中使用kiosk模式的相关讨论（请注意，在启动kiosk方式之前运行的其他Chrome进程可能会阻止此操作）在windows 7 上以全窗口或kiosk模式打开Chrome浏览器

相关文章：