画面遷移時に全画面表示

Question

画面遷移と同時に特定要素を全画面にしたいですがうまくいきません。
全画面表示というボタンをmonitorA.htmlに設置。
押下するとmonitorB.htmlに遷移し、例ではid:targetを全画面表示したいです。

monitorB.html

<div id="target" >
<p>aaa</p>
</div>

<script type="text/javascript" >
  window.onload = function() {
    var target = document.getElementById('target')
    if (target.webkitRequestFullScreen) {
      target.webkitRequestFullScreen();
    }
    else if (target. mozRequestFullScreen) {
      target. mozRequestFullScreen();
    }
    else {
      alert("not found")
    }
  };
</script>

window.onloadではなく切り替えスイッチをonclickでmonitorB.htmlに作成した場合は正しく動作します。
onloadからは不可能なのでしょうか。

ご教授よろしくお願いいたします。

Answer 1

ユーザに対する配慮のため、requestFullscreenはユーザの操作をトリガとしないと動作が許可されないことになっています。

このため、ユーザのクリック(タップ)といった操作がトリガになるonclickでは全画面にできますが、ブラウザの動作がトリガとなるonloadでは全画面への移行が許可されない、ということになります。

参考(Fullscreen APIの仕様): https://fullscreen.spec.whatwg.org/#allowed-to-request-fullscreen

Comments

[tqkqt0]

そうだったのですか。
ありがとうございます。大変参考になりました。

Answer 2

onclickで全画面表示にして、そこからページ移動するとかどうでしょう。

---

追記：

上記は全画面から戻ってしまうようなので、onclickで全画面表示にして、全画面にしたiframeで読み込むのはどうでしょう。（すみませんが、これも未テストです）

Comments

[othersight]

ページ移動時に全画面表示が解除されてしまうようですね。

[kei344]

そうなのですね、ご指摘ありがとうございます。

[tqkqt0]

iframeですか！なるほど、ためしてみます！ありがとうございます！

[othersight]

iframeをページ遷移させる方法なら全画面が解除されずに済みますね。