Question

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

我的全屏功能：

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

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

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

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

我看到你的选择：

要求用户将其浏览器设置为全屏模式。

在每个页面导航（当前问题）上启用全屏（通过使用API的按钮）。

使用单页应用程序设计，因此用户只需激活一次全屏（通过使用API的按钮）。

不要担心全屏模式。

Answer 2

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

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

此页面在浏览器中全屏显示，iframe内容导航全屏显示。

当用户在站点周围导航时，将退出JavaScript全屏

2 个答案:

我看到你的选择：