当用户浏览网站时 JavaScript 全屏退出答案

【问题标题】：JavaScript full screen exits when user navigates around site当用户浏览网站时 JavaScript 全屏退出
【发布时间】：2016-02-07 08:40:11
【问题描述】：

我有一系列具有“下一步”和“返回”按钮的页面。我希望用户能够全屏浏览整个流程。全屏适用于单个页面，但当用户返回或转发我的流程中的页面时退出。

我的全屏功能：

    var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);

当用户四处导航时，有什么方法可以让浏览器保持全屏显示？

谢谢！

【问题讨论】：

只是一个附带选项的注释：我遇到了一个 Web 应用程序同样的问题，它应该在“受控”设备中全屏显示，而不是在互联网上公开。在我们的案例中，经过多次测试和调查如何将应用程序编程为始终全屏运行，最好（也是最简单）的解决方案是使用全屏浏览器。特别是我们选择了“完全自助服务终端浏览器”play.google.com/store/apps/details?id=de.ozerov.fully，因为我们的设备是安卓平板电脑。但是其他平台也有类似的产品。

标签： javascript webkit fullscreen

【解决方案1】：

不，您将无法做到这一点。全屏模式必须由用户启动。

来自https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Using_full_screen_mode：

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

您必须让用户在他们导航到的每个新页面上激活全屏模式。

还有一个选择。您可以创建一个单页应用程序。然后用户只需启动一次全屏模式，他们将能够在保持全屏模式的同时浏览不同的“页面”。

编辑

但是为什么使用 cmd-shift-f 进入全屏模式可以让你四处导航呢？

这使 浏览器 进入全屏模式，这与使用全屏 API 不同。使用全屏 API，您可以在全屏模式下指定元素。

在您的示例中，您全屏显示的元素是 document.documentElement，即 html 元素。

这就是为什么当您在浏览器全屏模式下导航时，它会保持全屏状态。与您将元素指定为全屏模式相反，当您导航到新页面、更改选项卡或切换到另一个应用程序时，全屏模式将退出。

我认为你的选择：

要求用户将其浏览器启用为全屏模式。
在每个页面导航（您当前的问题）上启用全屏（通过使用 API 的按钮）。
采用单页应用设计，因此用户只需激活一次全屏（通过使用 API 的按钮）。
不用担心全屏模式。

【讨论】：

但是为什么使用 cmd-shift-f 进入全屏模式可以让你四处导航呢？

【解决方案2】：

对于内部应用程序，我使用全屏 iframe 解决方案 - 像这样的简单页面：

...
<body>
    <iframe id="ifr" frameborder="0" width="XXX" height="XXX" src="normal-page-with-links.html"></iframe>
</body>
...

并且此页面在浏览器中是全屏的，并且 iframe 内容中的导航保持全屏。

【讨论】：