Question

我想让我的HTML5游戏在发布时全屏显示。当我点击一个按钮时，它会全屏显示。但是当我使用window.onload使其进入全屏上载时，它在控制台上回复无法在'Element'上执行'requestFullScreen'：API只能由用户手势启动。我正在使用铬。有解决方法吗？

我的代码：

    <!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>

Answer 1

任何javascript api都是故意以这种方式制作的。想象一下，如果你去一个网站，它会自动打开全屏，而你根本不做任何事情。你会接触到一个令人讨厌的弹出窗口以及你打算打开的其他东西。因此任何此类脚本都需要用户交互才能工作。在没有用户交互的情况下切换到fullsreen非常感觉像恶意。例如，如果像这样的网站全屏开放：Virtual Desktop某人可能会对他们桌面上发生的事情感到困惑。

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

Partial WorkAround

无法在'Element'上执行'requestFullScreen'：API只能由用户手势启动

1 个答案: