javascript - 无法在 'requestFullScreen' : API can only be initiated by a user gesture 上执行 'Element'

标签 javascript html html5-fullscreen

<分区>

我想让我的 HTML5 游戏在启动时变成原生全屏。当我通过单击按钮执行此操作时,它会全屏显示。但是当我使用 window.onload 使其全屏加载时,它会在控制台上回复 Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture。我正在使用 Chrome 。有解决方法吗?

我的代码:

    <!DOCTYPE html>
    <html>
    <head>
<script>
window.onload = openfullscreen();

function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

function openfullscreen() {

launchIntoFullscreen(document.documentElement);
}

function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
window.close();
}

function fix() {
var screenwidth = screen.width;
var screenhei = screen.height;
document.getElementById('ifam').width = screenwidth;
document.getElementById('ifam').height = screenhei;
}
</script>
<style>
  #ifam {
    position:fixed;
    left:0%;
    top:0%;
    z-index:-1;
  }
  #fullscreen {
    position:fixed;
    left:0%;
    top:0%;
    z-index:1;
  }
  </style>
  </head>
  <body onload="fix()">
  <div id="fullscreen">
  <button onclick="openfullscreen()">Open</button>
  <button onclick="exitFullscreen()">Exit</button>
  </div>
  <iframe id="ifam" src="lchosser.html"></iframe>
  </body>
  </html>

最佳答案

我猜任何 javascript api 都是有意这样做的。试想一下,如果您访问一个网站,它会自动全屏打开,而您根本没有做任何事情。你会接触到一个充满烦人的弹出窗口和其他你甚至不想打开的东西的世界。所以任何这样的脚本都需要用户交互才能工作。在没有用户交互的情况下切换到全屏感觉就像是恶意的。例如,如果这样的网站以全屏模式打开:Virtual Desktop有些人可能对他们的桌面刚刚发生的事情感到很困惑。

如果您仍想尝试部分解决方法,请查看以下答案:

Partial WorkAround

关于javascript - 无法在 'requestFullScreen' : API can only be initiated by a user gesture 上执行 'Element',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32642865/

相关文章:

javascript - 如何制作动画虚线 svg 线?

javascript - 无法从另一个文件调用的 javascript 函数返回 Protractor 框架中的 promise

用于查找两个字符串之间的子字符串的 Javascript REGEX

javascript - 为什么 chrome 在弹出窗口时退出全屏?

javascript - 如何通过 onclick 事件进入全屏 - Phaser3

javascript - javascript inside dynamics的BMI计算语法

javascript - jspdf 正在生成损坏的 pdf

javascript - Bootstrap Flash 警报 CSS 在移动屏幕上无法正常工作

html - 如何将光标/文本位置指示器添加到由 javascript 控制的 &lt;textarea&gt;?

javascript - 使用全屏 API 触发全屏时,双指缩放在 macOS (Chrome) 上不起作用