質問: document.querySelector("#photo"); screenfull.request(element); } else{ alert("フルスクリーン未対応ブラウザです。"); } }); ``` ### 試したこと 上記のコードでボタンを押す必要がありますが、全画面表示にできることはわかりました。 しかし、これを自動化し、さらに解除されたときにポップアップを表示させるにはどうしたらいいのでしょうか。 ### 補足情報 利用環境はChromeを考えていますが、広く一般的に使えるようにしたいです。
回答: 結構重要なはなし ブラウザによってはブロックされてしまうかもしれません。というかブロックされます。(利用者の使用等を制限することはwebプログラマーとしてやってはいけないことの一つです。) こちらに書いてあるように > > セキュリティーの問題で、ユーザー操作でないプログラムによるフルスクリーンモードは、禁止されています。 > > > とか > > Note that for (Chrome) security reasons it cannot be called or executed automatically, there must be an interaction from the user first. (Such as button click, keydown/keypress etc.) > > > ということなので設定で許可しなくては動きません。 本題 それでも自分はやりたいんだ!やらなくちゃしょうがないんだという場合はどうぞ。 ``` window.onload = function(){ if ( screenfull.enabled ) { const element = document.querySelector("#photo"); screenfull.request(element); } else{ alert("フルスクリーン未対応ブラウザです。"); } }); document.addEventListener('fullscreenchange', function(event){ if (!document.fullscreenElement) { alert("フルスクリーンが終わりました"); } }); ``` `window.onload`で読み込みが終了した時にフルスクリーンにして、`document.fullscreenchange`イベントと`document.fullscreenElement`の組み合わせでフルスクリーン解除を検知します。 fullscreenchangeについてはこちら。 #### 追記 自分はこんな設定オンにしたくないので確認していません。