JavaScript | フルスクリーンモードの切り替えをトリガーにしたイベントを実装する方法

2022-02-01JavaScript イベント,JavaScript

Javascriptでフルスクリーンモードの切り替えをトリガーにしたイベントの実装方法を紹介しています。

フルスクリーンモードの切り替えをトリガーにしたイベントの実装サンプル

JavascriptのaddEventListener()を使ったイベントの実装サンプルとサンプルコードになります。

See the Pen JavaScript | Events triggered by copying text by yochans (@yochans) on CodePen.

HTMLにはフルスクリーンモードを切り替える用の<button>タグを設置しています。

<button id="full-screen-btn">full-screen mode ON</button>

フルスクリーンモードを切り替える用のボタン要素をquerySelector()で変数名「full_screen_btn」として取得しています。

フルスクリーンモード切り替えボタンをクリックした際にイベントを実行してdocument.fullscreenElement()で状態を確認「false」ならdocument.documentElement.requestFullscreen()でフルスクリーンモードに切り替えて、「true」ならdocument.exitFullscreen()でフルスクリーンモードを終了しています。

フルスクリーンモードの切り替えが行わた時のイベントはaddEventListener()で「fullscreenchange」を指定します。

サンプルではdocument.fullscreenElementで状態を確認して、ボタンのラベルを変更しています。

let full_screen_btn = document.querySelector(`#full-screen-btn`);

// full-screen change button
full_screen_btn.addEventListener('click', function () {
	if (!document.fullscreenElement) {
		document.documentElement.requestFullscreen();
	} else {
		document.exitFullscreen();
	}
}, false);

// full-screen change event
document.addEventListener('fullscreenchange', () => {
	if (document.fullscreenElement) {
		full_screen_btn.textContent = 'full-screen mode OFF';
	} else {
		full_screen_btn.textContent = 'full-screen mode ON';
	}
});