Question

我正在尝试使用JavaScript FullScreen API，从此处使用当前非标准实现的变通方法：

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

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

下面的代码尝试将浏览器设置为全屏，有时它可以正常工作，有时则不然。它始终调用警报以指示它正在请求全屏。这是我发现的：

它通常设置全屏。它可以进入停止工作的状态，但仍然会发出警报，即它仍在请求FullScreen，但它不起作用。
如果从按键处理程序（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!");
        }
    }
}

Answer 1

由于安全原因（至少在Chrome中），无法自动调用

requestFullscreen()。因此，它只能通过用户操作调用，例如：

点击（按钮，链接...）
key（keydown，keypress ...）

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

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

* W3规格：
“...为了防止嵌入式内容全屏显示，只有通过HTML allowfullscreen元素的iframe属性明确允许的嵌入内容才能全屏显示。这可以防止不受信任的内容全屏显示... “

了解详情：W3 Spec on Fullscreen

@abergmeier也提到，在用户生成的事件被触发后，Firefox上的全屏请求must be executed within 1 second。

Answer 2

我知道这是一个相当古老的问题，但在从任何用户互动未触发的代码调用mozRequestFullScreen()时搜索FireFox的错误消息时，Google仍然是最佳结果

请求全屏被拒绝，因为没有从short内部调用Element.mozRequestFullScreen（）运行用户生成的事件处理程序。

如前所述，这是一个安全设置，因此在普通浏览器环境（最终用户机器）中是正确的行为。

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

幸运的是，FireFox提供了在浏览器上删除此限制的可能性，这很难找到。我将把它写在这里，作为每个人通过Google搜索找到此页面的未来参考

在about:config页面上搜索以下密钥并将其设置为 false

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

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

full-screen-api.approval-required

希望这可以节省一些人浪费时间来找到这些设置。

Answer 3

您的功能没有任何问题。在Firefox中，如果直接调用该函数，它将阻止全屏显示。如您所知，请求全屏被拒绝，因为docElm.mozRequestFullScreen（）;没有从短时间运行的用户生成的事件处理程序中调用。因此，您必须在事件中调用该函数，例如Firefox中的onClick。

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

Answer 4

requestFullscreen()的另一个意外问题是父框架需要具有allowfullscreen属性，否则Firefox会输出以下错误：

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

除了iframe，这可能是由于您的网页位于frameset框架内造成的。由于不推荐使用frameset，因此不支持HTML5 allowfullscreen属性，requestFullscreen()调用失败。

Firefox文档在MDN上明确说明了这一点，但我认为对于那些可能不会首先阅读文档的开发人员而言，这里重申一下...... ahem

只能使用顶级文档或带有allowfullscreen属性的元素全屏显示。这意味着frame或object中的元素可以＆＃t; t。

Javascript请求全屏是不可靠的

4 个答案: