Javascript请求全屏不可靠

IT技术 javascript
2021-01-24 20:34:06

我正在尝试使用 JavaScript FullScreen API,从这里使用当前非标准实现的变通方法:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode#AutoCompatibilityTable

可悲的是,它的行为非常不稳定。我只关心 Chrome(使用 v17),但由于我遇到了问题,我在 Firefox 10 中做了一些测试以进行比较,结果是相似的。

下面的代码尝试将浏览器设置为全屏,有时可以,有时不行。它总是调用警报以指示它正在请求全屏。这是我发现的:

  • 它通常设置全屏。它可以进入停止工作的状态,但警报仍然发生,即它仍在请求全屏,但它不起作用。
  • 如果从按键处理程序 (document.onkeypress) 调用它可以工作,但在页面加载 (window.onload) 上调用时则不能工作。

我的代码如下:

function DoFullScreen() {

    var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !==     null) ||    // alternative standard method  
            (document.mozFullScreen || document.webkitIsFullScreen);

    var docElm = document.documentElement;
    if (!isInFullScreen) {

        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
            alert("Mozilla entering fullscreen!");
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
            alert("Webkit entering fullscreen!");
        }
    }
}
4个回答

requestFullscreen()不能自动调用是因为安全原因(至少在 Chrome 中)。因此,它只能由用户操作调用,例如:

  • 单击(按钮、链接...)
  • 键(按键,按键...)

如果您的文档包含在框架中:

  • allowfullscreen需要出现在<iframe>元素上*

* W3 规范:
“...为了防止嵌入内容进入全屏显示,只有通过allowfullscreenHTMLiframe元素属性明确允许的嵌入内容才能进入全屏显示。这可以防止不受信任的内容进入全屏显示……”

阅读更多:全屏 W3 规范

@abergmeier还提到,在 Firefox 上,您的全屏请求必须在触发用户生成的事件后1 秒内执行

@Derek 朕会功夫好吧,使用 Firefox Nightly,它仍然会产生错误。虽然它以前工作过......可能是因为我使用的是jQuery吗?:/
2021-03-13 20:34:06
至少在 Firefox 中,上述情况是正确的,并且您的代码必须在 1 秒内运行,否则也不会接受全屏请求(请参阅bugzilla.mozilla.org/show_bug.cgi?id=687687)。
2021-04-01 20:34:06
这是否意味着我无法fullscreen()在单击或按键功能中使用某个功能?
2021-04-02 20:34:06
@Derek我会功夫 Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.
2021-04-09 20:34:06
@Daniel Cheung - 恰恰相反,您只能通过单击/按键/等方式以编程方式进入全屏。事件处理程序。
2021-04-10 20:34:06

我知道这是一个很老的问题,但mozRequestFullScreen()在从未由任何用户交互触发的代码调用时搜索 FireFox 的错误消息时,它仍然是 Google 中的最佳结果

全屏请求被拒绝,因为 Element.mozRequestFullScreen() 不是从短期运行的用户生成的事件处理程序中调用的。

正如已经讨论过的,这是一个安全设置,因此是正常浏览器环境(最终用户机器)中的正确行为。

但我正在编写一个基于 HTML5 的数字标牌应用程序,该应用程序在受控环境下运行,无需任何用户交互。能够自动切换到全屏对我的应用程序至关重要。

幸运的是,FireFox 提供了一种消除浏览器上的这种限制的可能性,这很难找到。我会把它写在这里作为未来的参考,供每个人像我一样通过谷歌搜索找到这个页面

about:config页面上搜索以下key并设置为false

full-screen-api.allow-trusted-requests-only

对于我的数字标牌应用程序,我还删除了浏览器在输入 fullscren 时显示的提示:

full-screen-api.approval-required

希望这可以为某人节省我浪费在查找这些设置上的时间。

如何在我的应用程序中以编程方式设置这个“假”?
2021-03-26 20:34:06
@LukasZech 你听起来像是在创建一个“桌面”或其他“独立”的应用程序来安装在某个地方的计算机上。使用 Electron 之类的东西而不是浏览器可能会更好地为您服务。
2021-03-30 20:34:06
@AlejandroIglesias 今天我肯定会在这个项目中使用 Electron,但在 2014 年这根本不是一个选择,因为 Electron 当时处于非常早期的阶段
2021-04-04 20:34:06
这对我帮助很大,非常感谢您的分享!
2021-04-05 20:34:06
@niraj 出于安全原因,您无法从浏览器上下文中运行的 Javascript 更改 FireFox 的设置。有两个选项可以以编程方式更改设置,但两者都必须在浏览器进程之外的客户端计算机上执行。为您的个人资料创建一个 user.js 文件或创建一个生成首选项文件的 bash 脚本这两种解决方案都在这篇文章中详细描述
2021-04-05 20:34:06

你的功能没有任何问题。在 Firefox 中,如果您直接调用该函数,它将阻止全屏显示。如您所知,请求全屏被拒绝,因为 docElm.mozRequestFullScreen(); 不是从短期运行的用户生成的事件处理程序内部调用的。因此,您必须在 Firefox 中的 onClick 等事件上调用该函数。

<a href="#" onClick="DoFullScreen()">Full Screen Mode</a>

另一个意想不到的问题requestFullscreen()是父框架需要具有该allowfullscreen属性,否则Firefox会输出以下错误:

全屏请求被拒绝,因为文档中至少有一个包含元素不是 iframe 或没有“allowfullscreen”属性。

除了 iframe,这可能是由于您的页面在frameset框架内造成的由于frameset已弃用,不支持 HTML5allowfullscreen属性,requestFullscreen()调用失败。

Firefox的文件明确指出这对MDN,但我认为它承担重申在这里,对于开发商谁可能不首先阅读文档....啊哈

只有顶级文档中的元素或具有allowfullscreen 属性的元素才能全屏显示。这意味着 aframe或 an中的元素object不能。