Javascript请求全屏不可靠

我正在尝试使用JavaScript全屏API，在这里为当前的非标准实现使用变通方法：

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

下面的代码试图将浏览器设置为全屏，有时有效，有时无效。它总是调用警报以指示它正在请求全屏显示。以下是我的发现：

• 它通常设置全屏。它可以达到这样一种状态，即停止工作，但警报仍会发生，即它仍在请求全屏显示，但它不工作
• 如果从keypress处理程序（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!");
        }
    }
}

requestFullscreen（）

无法自动调用是因为安全原因（至少在Chrome中）。因此，它只能由以下用户操作调用：

• 单击（按钮、链接…）
• 按键（向下键、按键…）

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

• allowfullscreen

  需要出现在
  元素上*

*W3规范：
“…为了防止嵌入内容全屏显示，只有通过HTML

iframe

元素的

allowfullscreen

属性特别允许的嵌入内容才能全屏显示。这将防止不受信任的内容全屏显示…”

阅读更多：

---

在Firefox上，用户生成的事件被触发后，您的全屏请求也被提到。

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

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

---

我知道这是一个很老的问题，但在谷歌搜索FireFox的错误消息时，如果调用的代码不是由任何用户交互触发的，

mozRequestFullScreen（）

，这仍然是最重要的结果

请求全屏显示被拒绝，因为 元素。mozRequestFullScreen（）未从短字符串内部调用 正在运行用户生成的事件处理程序

如前所述，这是一种安全设置，因此是正常浏览器环境（最终用户计算机）中的正确行为

但我正在编写一个基于HTML5的数字看板应用程序，它在受控环境下运行，不需要任何用户交互。对于我的应用程序来说，能够自动切换到全屏是至关重要的

幸运的是，FireFox提供了一种删除浏览器限制的可能性，这是很难找到的。我将把它写在这里，作为大家将来通过谷歌搜索找到这个页面的参考，就像我一样

在

about:config

页面上搜索以下键并将其设置为false

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

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

full-screen-api.approval-required

---

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

另一个与

requestFullscreen（）

有关的意外问题是父帧需要具有

allowfullscreen

属性，否则Firefox会输出以下错误：

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

除了iFrame之外，这可能是由于页面位于

frameset

框架内。由于不推荐使用

frameset

，因此不支持HTML5

allowfullscreen

属性，并且

requestFullscreen（）

调用失败

Firefox文档在MDN上明确说明了这一点，但我认为需要在这里重申，对于那些可能没有先阅读文档的开发人员来说。。。。嗯哼

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

帧

或

对象

中的元素不能

---

第二个问题似乎是故意行为，显然只有在用户交互期间才允许全屏显示。不清楚的是，为什么即使在交互过程中，全屏显示有时也会起作用。你的功能在ubuntu上的Chrome 17中运行良好-我无法重现你的第一个问题-可能是操作系统特有的问题。当前页面会全屏显示，但当我导航到下一页时。。通过其他超链接，它又回到了正常模式。为什么？@karthi，这个页面上的所有信息都是一年前的，从那以后所有的浏览器都被更新了。如果您对当前的浏览器有问题，我建议您提出一个新问题。至少在Firefox中，上述情况是正确的，您的代码必须在1秒内运行，否则全屏请求也不会被接受（请参阅）。这是否意味着我不能在单击或按键功能中使用

fullscreen（）

函数？@Daniel Cheung-恰恰相反，您只能在单击/keypress/etc时以编程方式进入全屏。事件处理程序。@Derek朕會功夫 那么，每晚使用Firefox，它仍然会产生错误。但它以前是有效的。。。可能是因为我在使用jQuery吗/@德里克朕會功夫 <代码>全屏请求被拒绝，因为没有从短时间运行的用户生成的事件处理程序中调用元素.mozRequestFullScreen（）。这对我帮助很大，非常感谢您的分享！如何在我的应用程序中设置此“false”程序？@niraj出于安全原因，您无法从Javascript运行中更改FireFox的设置