浏览器禁用了自动全屏Failed to execute ‘requestFullscreen‘ on ‘Element‘: API can only be initiated by a user...
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
这个错误信息 "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture"
指的是在Web开发中,尝试通过JavaScript代码调用requestFullscreen()
方法来使一个元素进入全屏模式时,这个调用没有成功,因为它违反了浏览器的安全策略。
原因
现代浏览器出于安全考虑,限制了许多可以自动执行的功能,特别是那些可能会影响到用户体验或隐私的功能。全屏模式是一个显著的例子,因为它会改变用户的屏幕布局和可视内容。因此,浏览器要求全屏模式的请求必须是由用户的直接操作(如点击或触摸事件)触发的。
解决方案
-
确保全屏请求是由用户交互触发的:
将requestFullscreen()
方法的调用放在一个事件监听器内部,这个监听器应该监听用户的某个交互事件,如点击或触摸事件。例如:document.getElementById('myButton').addEventListener('click', function() { var elem = document.documentElement; // 例如,使整个页面进入全屏 if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } });
-
避免在文档加载或脚本执行时自动调用全屏:
不要将requestFullscreen()
放在如window.onload
或DOMContentLoaded
等自动执行的事件处理程序中。
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献17条内容
所有评论(0)