旧的 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 中,而不是将其存储在单独的文件中。现在它完美地工作。
我认为这可能会对遇到同样问题的其他人有所帮助...问候。
编辑:下面接受了一个答案,但对于任何以我的立场结束的人,主要问题是 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 中,而不是将其存储在单独的文件中。现在它完美地工作。
我认为这可能会对遇到同样问题的其他人有所帮助...问候。