Javascript请求全屏是不可靠的

Question

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

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

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

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

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

Answer 1

requestFullscreen()由于安全原因(至少在Chrome中)无法自动调用.因此,它只能由用户操作调用,例如:

• 点击(按钮,链接...)
• key(keydown,keypress ...)

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

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

*W3规范:
"...为了防止嵌入式内容全屏显示,只有通过allowfullscreenHTML iframe元素属性特别允许的嵌入内容才能全屏显示.这可以防止不受信任的内容进入全屏......"

阅读更多:全屏W3规格

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

Answer 2

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

请求全屏被拒绝,因为没有从短暂运行的用户生成的事件处理程序中调用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>