旧的JS全屏代码不再有效。 " requestFullscreen不是一个函数"错误

时间:2017-06-28 08:47:47

标签: html5-fullscreen

编辑:下面接受了一个答案,但对于最终担任我职务的人来说,主要问题是firefox默认情况下暂时启用了全屏-api.unprefix,然后在更新中更改了再次需要一个前缀。此外,如果你搜索:config for" fullscreen"它不会显示"全屏-api。"

我使用js长时间使用全屏网页的一些代码不再有效。

我已经检查了mdn(https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen)并且似乎没有任何变化,但出于某种原因,我无法在我的任何浏览器中全屏显示网站(我已经测试过Chrome ,Firefox和Firefox Developer Edition)。

此外,我给出的错误不是权限之一,但requestFullscreen似乎不是作为函数存在。

TypeError: document.body.requestFullscreen is not a function

我不知道的是一件大事吗?这可能与我的操作系统有关吗?很遗憾,在不超过6个月之前在我的所有浏览器中工作的旧代码(document.body.requestFullscreen())现在都无效。

此外,我已经在最常用的地方对其进行了测试,全屏仍可用于youtube或内置位<video>标签。

&#13;
&#13;
#test {
  height: 100px;
  width: 100px;
  background: orange;
}
&#13;
<button onclick="document.body.requestFullscreen()">Fullscreen document.body</button>

<button onclick="document.documentElement.requestFullscreen()">Fullscreen document.documentElement</button>

<button onclick="document.documentElement.requestFullscreen()">Fullscreen Test Div</button>

<div id="test">Test Div</div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

根据the MDN documentation的浏览器支持部分:

这是一个实验性功能。

Chrome仅支持webkit前缀。如果您在浏览器中打开full-screen-api.unprefix.enabled首选项,Firefox仅支持它。 Internet Explorer仅支持ms前缀。

答案 1 :(得分:1)

以下是实现供应商前缀的全屏api请求的示例:

function toggleFullScreen() {
    // Get your full screen element
    const video= document.querySelector('.player');
    const rfs = video.requestFullscreen || video.webkitRequestFullScreen || video.mozRequestFullScreen || video.msRequestFullscreen;
    rfs.call(video);
}

在按钮上“点击”添加事件监听器:

const fullscreenBtn = player.querySelector('.fullscreen-btn');
fullscreenBtn.addEventListener('click', toggleFullScreen);

答案 2 :(得分:0)

我希望这会对某人有所帮助。

因此,我正在使用的网站(svejen.ikbugu.com)上的全屏功能存在问题。

对我来说,IE和Chrome全屏正常运行,但Firefox无法正常运行。没有错误抛出,并且该函数在1秒内执行良好(我读过的地方,如果超过1秒,firefox将阻止执行全屏请求)。我也有带或不带供应商特定前缀的请求,不是吗。

对我有用的是将javascript直接粘贴到html中,而不是将其存储在单独的文件中。现在,它可以完美运行了。

我认为这可能对遇到同样问题的其他人有所帮助...问候。