为了账号安全,请及时绑定邮箱和手机立即绑定

Javascript请求全屏显示不可靠

Javascript请求全屏显示不可靠

眼眸繁星 2019-12-02 10:55:35
我正在尝试使用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!");        }    }}
查看完整描述

3 回答

?
紫衣仙女

TA贡献1839条经验 获得超15个赞

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


由于未从短暂运行的用户生成的事件处理程序内部调用Element.mozRequestFullScreen(),因此拒绝全屏请求。


如前所述,这是一个安全设置,因此在正常的浏览器环境(最终用户计算机)中是正确的行为。


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


幸运的是,FireFox可以消除浏览器上的这种限制,这很难找到。我将在这里编写它,作为以后像我一样通过Google搜索找到此页面的每个人的参考。


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


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

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


full-screen-api.approval-required

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


查看完整回答
反对 回复 2019-12-02
?
幕布斯6054654

TA贡献1876条经验 获得超7个赞

您的功能没有错。在Firefox中,如果您直接调用该函数,则会阻止进入全屏模式。如您所知,由于docElm.mozRequestFullScreen();,全屏请求被拒绝了。没有从运行时间较短的用户生成的事件处理程序内部调用。因此,您必须在Firefox等onClick事件上调用该函数。


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


查看完整回答
反对 回复 2019-12-02
  • 3 回答
  • 0 关注
  • 654 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信