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

JavaScript full screen exits when user navigates around site

本文关键字：JavaScript 退出 用户 浏览 网站      更新时间：2023-09-26

我有一系列带有"下一步"answers"返回"按钮的页面。我希望用户能够全屏浏览整个流程。全屏对单个页面有效，但当用户在我的流中返回或转发页面时就会退出。

我的全屏功能：

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

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

谢谢！

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

发件人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元素。

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

在我看来，您的选择：

  1. 要求用户将浏览器启用为全屏模式。

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

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

  4. 不要担心全屏模式。

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

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

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

相关文章：