JavaScriptで全画面表示になる実装を行いたいです。

ポートフォリオ制作でJavaScriptで全画面表示になるように実装したのですが、うまくいきません。
そこで、全画面表示になるようなソースコードを教えてください宜しくお願い致します。

ちなみに、自分の試したソースコードが下記の通りです。

function toggleFullScreen() {
	  var doc = window.document;
	  var docEl = doc.documentElement;

	  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
	  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

	  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
	    requestFullScreen.call(docEl);
	  }
	  else {
	    cancelFullScreen.call(doc);
	  }
}

toggleFullScreen();

下記がエラーメッセージです。

Uncaught (in promise) TypeError: fullscreen error
    at toggleFullScreen

エラーメッセージでは、「requestFullScreen.call(docEl);」の「call(docE1);」で
赤線が引かれて、エラーメッセージが出てました。

Lhankor_Mhy

2020/07/16 05:14

環境を教えてください。

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

回答3件

MDNにのってました
https://developer.mozilla.org/ja/docs/Web/API/Document/exitFullscreen

html
1<body>
2
3</body>
4
5<script>
6    document.addEventListener("keydown",function(event){
7        if(document.fullscreenElement){
8            document.exitFullscreen()
9        }else{
10            document.body.requestFullscreen()
11        }
12    })
13    document.addEventListener("touchstart",function(event){
14        if(document.fullscreenElement){
15            document.exitFullscreen()
16        }else{
17            document.body.requestFullscreen()
18        }
19    })
20</script>

キーを押すか画面をたっちするかで全画面化及び解除できます
あとほかの方もいってるみたいですが request...()系のコードは EventListener の "keydown","click" とかを使わないと動作しないのが多いみたいですね。

投稿2021/10/01 09:54

編集2021/10/01 09:59

9nahito

総合スコア45

ユーザー操作（ボタンを押した）などから全画面になるようにしないとrequestFullScreen が拒否されるようです。（開いた瞬間に全画面にされるWebサイト、正直かなり嫌ですよね）

質問者さんのコードは、HTMLが開かれたときに全画面にしようとしているのでこの条件に当てはまります。
全画面にするコードは、ボタン押下などのユーザー操作から呼び出してください。

試したコードを貼っておきます。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <script>
5            function toggleFullScreen() {
6            var doc = window.document;
7            var docEl = doc.documentElement;
8
9            var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
10            var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
11
12            if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
13            requestFullScreen.call(docEl);
14            }
15            else {
16            cancelFullScreen.call(doc);
17            }
18        }
19
20        // この呼び出しはユーザー操作によるものではないので必ず失敗する。
21        toggleFullScreen();
22        </script>
23    </head>
24    <body>
25        <button onclick="toggleFullScreen()">fullscreen</button>
26    </body>
27</html>
28

投稿2020/07/16 06:19

YakumoSaki

総合スコア2027

ryutaro0112

2020/07/16 06:21

ご回答の程ありがとうございます。そうゆうことだったのですね！上記のソースコードで試してみます。

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

別の検索エンジンで開いてみましたか？
一応サイト乗っけておきます
https://developer.mozilla.org/ja/docs/Web/API/Element/requestFullScreen

投稿2020/07/16 04:50

編集2020/07/16 05:47

snowdropAPP

総合スコア41

ryutaro0112

2020/07/16 04:57

別の検索エンジンで開いてみましたが、おなじエラーメッセージがでます。

kyoya0819

2020/07/16 05:14

> 別の検索エンジンで開いてみましたか？検索エンジンがどう関わるのでしょうか？ > https://developer.mozilla.org/ja/docs/Web/API/Element/requestFullScreen リンクはMarkDown文法をご利用ください。

snowdropAPP

2020/07/16 05:43 編集

IEで開いた時とGoogleChromeで開いたときで表示されたり思っていた動きと違ったりするときありませんか？あとバージョンが最新でないと動かないとかもあるそうなので、、、まあでもソースとエラーを見る限りはそんなエラーではなさそうなのですが一応念のためほかの検索エンジンでも開いてもらった次第ですリンクの件はミスをしていましたご指摘ありがとうございます

kyoya0819

2020/07/16 05:47

それは検索エンジンではありません。「ブラウザ」です。リンクはまだ間違えています。 https://teratail.com/help#about-markdown

snowdropAPP

2020/07/16 05:48

度重なるご指摘ありがとうございます。検索エンジンはyahooやグーグルのことですね。。。リンクの挿入のやり方まで感謝いたします

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

あなたの回答