当用户在站点中导航时，JavaScript全屏退出

Question

我有一系列的页面，有“下一步”和“后退”按钮。我希望用户能够全屏通过整个流程。Fullscreen适用于单独的页面，但当用户返回或前进我的流程中的页面时，Fullscreen将退出。

我的全屏功能：

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

当用户四处导航时，有没有办法让浏览器保持全屏显示？

谢谢!

Answer 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进入全屏可以让你到处导航呢？

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

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

这就是为什么当你在浏览器全屏模式下导航时，它会停留在全屏模式。与您指定一个元素处于全屏模式时不同，当您导航到新页面、更改标签或切换到另一个应用程序时，将退出全屏模式。

在我看来，你的选择：

1. 要求用户将浏览器启用到全屏模式。
2. 在每个页面导航(您当前的问题)上启用全屏(通过使用API的按钮)。
3. Go采用单页面应用程序设计，因此用户只需激活一次全屏(通过使用API的按钮)。
4. 不用担心全屏模式。

Answer 2

对于内部应用程序，我使用带有全屏iframe的解决方案-简单的页面如下所示：

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

这个页面在浏览器中是全屏的，而iframe内容中的导航是全屏的。