旧的 JS 全屏代码不再有效。 "requestFullscreen is not a function" 错误

Old JS Fullscreen code no longer working. "requestFullscreen is not a function" error

编辑:下面接受了一个答案,但对于任何以我的立场结束的人,主要问题是 firefox 默认临时启用全屏-api.unprefix,然后在更新中更改了它,以便再次需要前缀。此外,如果您在 about:config 中搜索 "fullscreen",它不会显示 "full-screen-api."

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

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

此外,我得到的错误不是权限之一,而是 requestFullscreen 似乎不作为函数存在。

TypeError: document.body.requestFullscreen is not a function

是不是发生了什么我不知道的大事?这可能与我的OS有关吗?非常奇怪的是,不到 6 个月前在我的所有浏览器中工作的旧代码 (document.body.requestFullscreen()) 现在在 none.

中工作

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

#test {
  height: 100px;
  width: 100px;
  background: orange;
}
<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>

更新:三年后,该功能不再处于试验阶段。只有 2020 年的 Internet Explorer 和 Safari 才需要前缀。


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

这是一个实验性功能。

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

下面是实现供应商前缀全屏 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);

希望对大家有所帮助。

所以我在我正在使用的网站 (svejen.ikbugu.com) 上遇到全屏功能问题。

对我来说,IE 和 Chrome 全屏可以,但 Firefox 不行。没有错误被抛出并且该函数在 1 秒内执行良好(我在某处读到如果超过 1 秒,firefox 会阻止全屏请求执行)。我也有带和不带供应商特定前缀的请求,所以不是这样。

对我有用的是将 javascript 直接粘贴到 html 中,而不是将其存储在单独的文件中。现在它完美地工作。

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