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', () => {
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エラーを発生させる可能性があります。
実装時にはフルスクリーンモードかどうかを判別したり、フルスクリーンモード時にのみ解除ボタンを表示する必要があります。