The Acorn Spirit's Journey

フルスクリーン表示にするためのボタンを用意して、そのボタンをクリックしたらフルスクリーン表示になり、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”
ボタンをクリックしてスライドショーを全画面にする。