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

JavaScript,JavaScript フルスクリーンモード

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

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

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

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

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

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

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

ボタンに対し、addEventListenerでクリックイベントを実装。

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

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

document.querySelector('#request-full-screen').addEventListener("click", function (e) {
	document.documentElement.requestFullscreen();
}, false);

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

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

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

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

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

document.querySelector('#cancel-full-screen').addEventListener("click", function (e) {
	document.exitFullscreen();
}, false);

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

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