web-dev-qa-db-ja.com

「要素」で「requestFullScreen」を実行できませんでした：APIはユーザージェスチャーによってのみ開始できます

起動時にHTML5ゲームをネイティブフルスクリーンにしたい。 onclickボタンでこれを行うと、フルスクリーンになります。しかし、window.onloadを使用してフルスクリーンオンロードにすると、コンソールで応答します。クロムを使用しています。これに回避策はありますか？

私のコード：

    <!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>
javascripthtmlhtml5-fullscreen
12
Tae Hagen

Javascript apiは意図的にこの方法で作成されていると思います。 Webサイトにアクセスして、何もしなくてもフルスクリーンで自動的にオンになると想像してみてください。煩わしいポップアップや、開く予定のあるその他のアイテムの全世界にさらされることになります。したがって、このようなスクリプトが機能するには、ユーザーの操作が必要です。ユーザーの操作なしでfullsreenに切り替えることは、悪意があるように感じられます。このようなサイトがフルスクリーンで開いた場合の例： Virtual Desktop 誰かが自分のデスクトップで起こったことについてかなり混乱するかもしれません。

それでも部分的な回避策を試したい場合は、おそらく次の答えを見てください：

部分的な回避策

2
hunters30