JavaScriptでページの全画面表示をコントロールするelement.requestFullscreen()・document.exitFullscreen()メソッドの使い方

JavaScriptでページの全画面表示をコントロール

JavaScriptでユーザーが開いているページを強制的に全画面表示にしたり、逆にそれを解除したい時はelement.requestFullscreen()document.exitFullscreen()メソッドを利用します。

ただし、このメソッドはまだまだ対応していないブラウザがあるめ、ベンダープレフィックスが必要です。(サンプルコードをご覧ください。)

メソッド

メソッド意味返り値
element.requestFullscreen()ページにフォーカスが当たった時Promise
document.exitFullscreen()ページにフォーカスが外れた時Promise
全画面表示をコントロールするメソッド

サンプルコード

サンプルコードとして、「全画面表示」と「全画面解除」ボタンを実装しました。

ちなみに、全画面表示の時はdocument.bodyの様に、ページのどの部分(要素)を全画面表示にするかを選択することができます。

一方で、全画面表示を解除する時は対象に出来る要素はdocumentのみとなります。

Output
Pug
.d-flex
		button#button.mb-4.text-center.mr-2 全画面表示
		button#button1.mb-4.text-center 全画面表示解除
SCSS
#button,
#button1 {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  //width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
document.getElementById('button').addEventListener('click', (event) => {
	const userConfirm = confirm('全画面表示にします。よろしいですか?');
	if (userConfirm) {
		if (document.body.requestFullscreen) {
    // 標準仕様
    document.body.requestFullscreen();
  } else if (document.body.webkitRequestFullscreen) {
    // Safari, Chrome
    document.body.webkitRequestFullscreen();
  } else if (document.body.mozRequestFullScreen) {
    // Firefox
    element.mozRequestFullScreen();
  } else if (document.body.msRequestFullscreen) {
    // IE11+
    document.body.msRequestFullscreen();
  }
	}
});

document.getElementById('button1').addEventListener('click', (event) => {
	if (document.exitFullscreen) {
    // 標準仕様
    document.exitFullscreen();
  } else if (document.webkitCancelFullScreen) {
    // Safari, Chrome
    document.webkitCancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    // Firefox
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    // IE 11+
    document.msExitFullscreen();
  }
});
インストラクター
コメント

コメントを残す