我有一系列带有“下一页”和“后退”按钮的页面。我希望用户能够在整个流程中全屏显示。全屏模式适用于单个页面,但是当用户在我的流程中向后或向前移动页面时,全屏模式将退出。

我的全屏功能:

    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.
您将必须让用户在他们导航到的每个新页面上激活全屏模式。

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

编辑



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

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

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

我所看到的您的选择:

  • 要求用户将其浏览器启用为全屏模式。
  • 在每个页面导航(您当前的问题)上启用全屏(通过使用API​​的按钮)。
  • 使用单页应用程序设计,因此用户只需激活一次全屏(通过使用API​​的按钮)。
  • 不用担心全屏模式。
  • 关于当用户在网站上浏览时,JavaScript全屏退出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17793550/

    10-12 12:20
    查看更多