1

编辑：下面接受了一个答案，但是对于最终处于我位置的任何人，主要问题是firefox默认情况下暂时启用了全屏api.unprefix，然后在更新中对其进行了更改，以便再次使用前缀必要的。此外，如果您在 about:config 中搜索“全屏”，它不会显示“全屏 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

是不是发生了我不知道的大事？这可能与我的操作系统有关吗？奇怪的是document.body.requestFullscreen()，在 6 个月前在我的所有浏览器中都可以使用的旧代码 () 现在无法正常使用。

此外，我已经在最常使用它的地方对其进行了测试，全屏仍然适用于 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>

4

3 回答 3

3

更新：三年后，该功能不再是实验性的。2020 年仅 Internet Explorer 和 Safari 需要前缀。

根据MDN 文档的浏览器支持部分：

这是一个实验性功能。

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

于 2017-06-28T09:00:01.933 回答
2

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

addEventListener for 'click' 你的按钮：

const fullscreenBtn = player.querySelector('.fullscreen-btn');
fullscreenBtn.addEventListener('click', toggleFullScreen);
于 2018-12-01T23:45:30.767 回答
0

我希望这对某人有帮助。

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

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

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

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

于 2020-02-24T16:22:03.640 回答