在全屏模式下运行网站

Question

在全屏模式下运行网站

javascripthtmlfullscreen

22

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

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

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

我已经考虑加载一个SWF文件以全屏模式显示网站，但是，我想强调只使用默认模式（html，css和javascript）的所有可能性，而不是朝这个方向努力。

- Marcio Barroso

1

看一下这个：http://davidwalsh.name/fullscreen。唯一的注意事项是它不一定在所有浏览器上都能正常工作。 - Chris Forrence

2

如果网站将在电视上显示，您应该已经使用为电视设计的操作系统，并且这些操作系统通常已经具备全屏浏览器。 - Arturo Torres Sánchez

我不会为电视使用任何特定的东西...它是一个通用的网站。 - Marcio Barroso

5个回答

11

其他答案已经描述了如何以较为独立于浏览器的方式全屏显示页面。然而，需要用户交互的问题仍然存在。

由于安全原因，您无法强制网页在全屏模式下显示。这需要用户交互。

此外，即使在同一网站上，用户转到另一个页面时，浏览器也会离开全屏模式，用户每次打开新页面都需要执行一些“用户交互”才能重新进入全屏模式。
这就是为什么如果想要全屏显示，您的网站必须是单个页面的原因。

我建议这样做：使用一个带有隐藏的iFrame的单个启动页面。

每当用户单击或按任意键时，只需设置该iFrame为全屏并显示它。当接收到退出全屏模式的事件时，隐藏iFrame以显示启动画面。

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

以下是一个在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”头设置为“sameorigin”（禁止跨站点嵌入），因此它停止工作了。

附言：我喜欢在浏览器中模拟完整的操作系统的想法，而且全屏更好！ :) 更改您的操作系统！
另外，我不是网页开发人员。只是认为这个问题很有趣。

- EvgEnZh

1

感谢您添加了一个真正有用的答案 - 不像其他否定者，您提供了一个可行的解决方案而不是无用的抱怨。棒极了。 - RomanM

4

你可以使用requestFullScreen()方法，具体内容请参考https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode。注意：这仍然需要用户输入-但避免使用flash。

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

- Kami

9

您不能在没有用户交互的情况下调用这些函数。这也是提问者最初发布此问题的原因。对于他的问题，唯一的答案是无法在没有用户交互的情况下初始化全屏。 - Cerbrus

5

无法执行“requestFullScreen”（全屏）命令，因为API只能由用户手势触发。 - Tom

这个函数可以在用户手势（例如onClick）时执行，但你不能从代码中强制执行。 - TuanHV

Element.ALLOW_KEYBOARD_INPUT 这是用来做什么的？ - Birat

@Birat - 它允许在全屏模式下与键盘进行交互，适用于某些浏览器（WebKit是Safari、Chrome等）。请参见https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/。 - Kami

2

当我需要做类似的事情时，我使用了一个启动画面。进入全屏模式的按钮请求JS弹出窗口的属性：

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

以下方法并非完全可靠，但比我发现的任何其他方法都有效。您可能无法在没有用户交互的情况下完成此操作，因此使用类似闪屏的东西可以将干扰最小化，使其更加普遍接受。

- Nicholas

1

我的浏览器默认会阻止那样的弹窗。 - Cerbrus

@Cerbrus 这是一个很好的观点。几年前我设置这个功能时，弹窗拦截器还不常见。 - Nicholas

1

如果您已经在使用onclick事件...为什么不将当前网页设置为全屏呢？ - Neil

@Neil 它将在新窗口中打开 pageName.html，这意味着当前页面可以是任何页面，比如 "xyz.html"。此外，pageName.html 可能没有 onClick 事件。 - Chetan Goyal

0

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

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

也许，在复杂站点上不太现实，但我的用途是特定的“窗格”（在这种情况下为 div 元素）。为了专注于特定的 div，我隐藏了其他的 div，然后相应地设置样式。如果恰好有用户交互从全屏模式切换，我 (1) 使用常规的 myElement.*requestFullScreen() document.*exitFullscreen() 调用，(2) 显示/隐藏其他的 div，以及 (3) 在下面的类之间切换：

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

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

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

- pigeon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cerbrus · Accepted Answer

你无法强制一个网站进入全屏模式。

如果这是可能的，想象一下安全方面存在的问题。
恶意网站可能会"控制"一个计算机操作不太熟练的用户的桌面，进行各种可疑的活动。

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

我非常确定Flash也是类似的，它需要用户交互才能进入全屏模式。否则，我们会看到很多几乎无法关闭的全屏弹窗。