全画面表示設定の仕方

前提・実現したいこと

オンライン模試などでよく使用される、他のタブを利用しながらの利用を禁止するために、
強制的に全画面表示にする方法ってどのように組めばいいのでしょうか。

具体的には、

ページを開いた瞬間に全画面表示になる
↓
ユーザーによって全画面表示を解除された場合は
無効化できないポップアップを表示して表示されているページを見れなくする
（あるいはページに対してスクロールなどの操作をできなくする）

該当のソースコード

javascript
1  document.querySelector("#btn-open").addEventListener("click", ()=>{
2    if ( screenfull.enabled ) {
3      const element = document.querySelector("#photo");
4      screenfull.request(element);
5    }
6    else{
7      alert("フルスクリーン未対応ブラウザです。");
8    }
9  });

試したこと

上記のコードでボタンを押す必要がありますが、全画面表示にできることはわかりました。
しかし、これを自動化し、さらに解除されたときにポップアップを表示させるにはどうしたらいいのでしょうか。

補足情報

利用環境はChromeを考えていますが、広く一般的に使えるようにしたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

結構重要なはなし

ブラウザによってはブロックされてしまうかもしれません。というかブロックされます。（利用者の使用等を制限することはwebプログラマーとしてやってはいけないことの一つです。）
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11162385786
こちらに書いてあるように

セキュリティーの問題で、ユーザー操作でないプログラムによるフルスクリーンモードは、禁止されています。

とか
https://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode

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.)

ということなので設定で許可しなくては動きません。

本題

それでも自分はやりたいんだ！やらなくちゃしょうがないんだという場合はどうぞ。

javascript
1  window.onload = function(){
2    if ( screenfull.enabled ) {
3      const element = document.querySelector("#photo");
4      screenfull.request(element);
5    }
6    else{
7      alert("フルスクリーン未対応ブラウザです。");
8    }
9  });
10
11document.addEventListener('fullscreenchange', function(event){
12  if (!document.fullscreenElement) {
13    alert("フルスクリーンが終わりました");
14  }
15});