JavaScript | ページをフルスクリーンモードに切り替える方法

2022-02-06JavaScript 制御,JavaScript

JavaScript | ページをフルスクリーンモードに切り替える方法

JavaScriptで表示中のサイトのページサイトをフルスクリーンモードに切り替える方法を紹介しています。

以下は動作サンプルになります。

「Request Full Screen」ボタンでページをフルスクリーンモードに切り替え、「Cancel Full Screen」ボタンでフルスクリーンモードを解除します。

ページをフルスクリーンモードで表示する

表示中のページをフルスクリーンモードにするシンプルなサンプルコードです。

HTMLは上記サンプルに使っているbutton要素を追加しています。

<button id="request-full-screen">Request Full Screen</button>

ボタンに対し、addEventListener()でクリックイベントを実装しています。

Document.documentElementrequestFullscreen()を指定してフルスクリーンモードにしています。

Document.documentElement<html>~</html>を意味します。

document.querySelector('#request-full-screen').addEventListener('click', () => {
	document.documentElement.requestFullscreen();
});

フルスクリーンモードを解除する

フルスクリーンモードはブラウザに設定されているショートカットキー、Windowsであれば「Esc」「F11」にて解除可能ですが別途、解除ボタンやショートカットキーなどを用意する事も可能です。

HTMLは上記サンプルに使っているbutton要素を追加しています。

<button id="cancel-full-screen">Cancel Full Screen</button>

フルスクリーンモードを解除するにはdocumentに対して、exitFullscreen()を指定します。

document.querySelector('#cancel-full-screen').addEventListener('click', () => {
	document.exitFullscreen();
});

サンプルではフルスクリーンモードの解除ボタンを最初から表示していますが、フルスクリーンモードでない場合にexitFullscreen()を実行するとJavaScriptエラーを発生させる可能性があります。

実装時にはフルスクリーンモードかどうかを判別したり、フルスクリーンモード時にのみ解除ボタンを表示する必要があります。