这个错误信息 "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture" 指的是在Web开发中,尝试通过JavaScript代码调用requestFullscreen()方法来使一个元素进入全屏模式时,这个调用没有成功,因为它违反了浏览器的安全策略。
在这里插入图片描述
在这里插入图片描述

原因

现代浏览器出于安全考虑,限制了许多可以自动执行的功能,特别是那些可能会影响到用户体验或隐私的功能。全屏模式是一个显著的例子,因为它会改变用户的屏幕布局和可视内容。因此,浏览器要求全屏模式的请求必须是由用户的直接操作(如点击或触摸事件)触发的。

解决方案

  1. 确保全屏请求是由用户交互触发的
    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();
        }
    });
    
  2. 避免在文档加载或脚本执行时自动调用全屏
    不要将requestFullscreen()放在如window.onloadDOMContentLoaded等自动执行的事件处理程序中。

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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐