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

ale*_*311 7 javascript webkit fullscreen

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

我的全屏功能:

    var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);
Run Code Online (Sandbox Code Playgroud)

当用户导航时,有没有办法让浏览器保持全屏?

谢谢!

fby*_*ite 9

不,你将无法做到这一点.全屏模式必须由用户启动.

来自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.documentElementhtml元素是元素.

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

我看到你的选择:

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

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

  3. 使用单页应用程序设计,因此用户只需激活一次Fullscreen(通过使用API​​的按钮).

  4. 不要担心全屏模式.


小智 5

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

...
<body>
    <iframe id="ifr" frameborder="0" width="XXX" height="XXX" src="normal-page-with-links.html"></iframe>
</body>
...
Run Code Online (Sandbox Code Playgroud)

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