【JavaScript】フルスクリーン表示と解除【覚書】
フルスクリーン表示にするためのボタンを用意して、そのボタンをクリックしたらフルスクリーン表示になり、Escキーで解除。
セキュリティ上の理由から、スクリプトによる自動フルスクリーン表示はほとんどのブラウザで許可されていません。
スクリーン関数はショートカットキーやクリックでのイベント等、ユーザー側のアクションをトリガーとするイベントハンドラ内で呼び出す必要があるため、ロード時などは使用できません。
ページ読み込み完了と同時にJavaScriptでフルスクリーン表示する、というのは現実的ではないので
“ボタンをクリックしたらフルスクリーン表示”という方法になります。
他の方法では、単純にユーザーがF11キー(Windowsの場合)を押せばフルスクリーンになります。
いずれにせよ、フルスクリーンはユーザー側のアクションで実行されるものであります。
webページ内の動画部分や画像部分など、一部分をフルスクリーンにすることも可能。
ボタン
<button onclick="openFullscreen();">フルスクリーンにする</button>
フルスクリーン表示と解除
// フルスクリーン表示 function openFullscreen() { var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); // W3C spec } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); // Firefox } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); // Chrome, Safari and Opera } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); // IE/Edge } } // Escapeキーでフルスクリーンを解除 function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); // W3C spec } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); // Firefox } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); // Chrome, Safari and Opera } else if (document.msExitFullscreen) { document.msExitFullscreen(); // IE/Edge } } document.addEventListener('keydown', function(event) { if (event.key === "Escape") { closeFullscreen(); } });
サイト内のスライドショー部分をフルスクリーンに
document.getElementById('slideshowOpen').addEventListener('click', function() { var elem = document.getElementById('slideshow'); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } });
ボタン id=”slideshowOpen”
スライドショー id=”slideshow”
ボタンをクリックしてスライドショーを全画面にする。