JavaScript请求全屏是不可靠的
我正在尝试使用JavaScript FullScreen API,从这里使用当前非标准实现的解决方法:
https://developer.mozilla.org/en/DOM/Using_full-screen_mode#AutoCompatibilityTable
可悲的是,它performance得非常不正常。 我只关心Chrome(使用V17),但是由于我遇到了问题,我在Firefox 10中做了一些testing来比较,结果是相似的。
下面的代码尝试将浏览器设置为全屏,有时可用,有时不可用。 它总是调用警报来表明它正在请求全屏。 这是我发现的:
- 它通常设置全屏。 它可以达到这个停止工作的状态,但警报仍然发生,即它仍在请求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!"); } } }
requestFullscreen()
不能被自动调用是因为安全原因(至less在Chrome中)。 因此只能通过用户操作调用,例如:
- 点击(button,链接…)
- 键(keydown,按键…)
如果您的文档包含在一个框架中:
-
allowfullscreen
需要存在于<iframe>
元素中*
* W3规格:
“…为了防止embedded式内容全屏显示,只有通过HTMLiframe
元素的allowfullscreen
属性明确允许embedded的内容才能够全屏显示,这样可以防止不受信任的内容全屏显示。
阅读更多: 全屏的W3规格
同样在@abergmeier中提到,在Firefox中,您的全屏请求必须在用户生成的事件被触发后的1秒内执行 。
我知道这是一个相当古老的问题,但是当从没有任何用户交互触发的代码调用mozRequestFullScreen()
时,它仍然是GooglesearchFireFox的错误消息的最好结果。
全屏请求被拒绝,因为Element.mozRequestFullScreen()不是从短期运行的用户生成的事件处理程序中调用的。
正如已经讨论的那样,这是一个安全设置,因此在正常的浏览器环境(最终用户机器)中是正确的行为。
但是我正在写一个基于HTML5的数字标牌应用程序,它在一个受控的环境下运行,不需要任何用户交互。 自动切换到全屏对我的应用至关重要。
幸运的是,FireFox提供了一个可能性来消除浏览器上的这个限制,这是很难find的。 我会把它写在这里作为将来的参考大家通过谷歌searchfind这个页面,就像我做的那样
在about:config
页面上search以下键并将其设置为false
full-screen-api.allow-trusted-requests-only
对于我的数字标牌应用程序,我还删除了在进入fullscren时浏览器显示的提示:
full-screen-api.approval-required
希望这可以节省一些人浪费时间来find这些设置。
你的function没有问题。 在Firefox中,如果直接调用该函数,则会阻止全屏显示。 如您所知,请求全屏被拒绝,因为docElm.mozRequestFullScreen(); 没有从短的运行用户生成的事件处理程序中调用。 所以,你必须调用Firefox上的onClick等事件。
<a href="#" onClick="DoFullScreen()">Full Screen Mode</a>
requestFullscreen()
另一个意外问题是父框架需要具有allowfullscreen
属性,否则Firefox会输出以下错误:
全屏请求被拒绝,因为至less有一个文档的包含元素不是一个iframe或没有“allowfullscreen”属性。
除了iframe之外,这可能是由页面在frameset
框架内引起的。 由于frameset
已被弃用,因此不支持HTML5 allowfullscreen
属性,并且requestFullscreen()
调用失败。
Firefox的文档在MDN上明确指出了这一点,但是我认为这里需要重申,对于那些可能不会先阅读文档的开发者来说……
只有顶层文档中的元素或具有allowfullscreen属性的元素才能全屏显示。 这意味着
frame
或object
内的元素不能。