JavaScriptで全画面表示を実装する方法｜Fullscreen APIの使い方と注意点

JavaScriptでウェブページを全画面表示にしたい方へ。
本記事では、Fullscreen APIを使って、ユーザー操作でページをフルスクリーンに切り替える方法を、 特定の要素や、document全体、動画のみも含めて解説します。

Fullscreen APIの仕様と制限事項（ブラウザ別の挙動も含む）

フルスクリーンAPIは、ユーザーの意図しない全画面表示を防ぐため、ユーザー操作（クリックやキー入力）をトリガーとして呼び出す必要があります。
これはブラウザのセキュリティ設計に基づく仕様です。(onload等のイベントでフルスクリーンAPIを呼び出しても無視されます)
iOS Safariでは、requestFullscreen() がサポートされていないため、フルスクリーン表示は原則不可です。
これはiOSのWebKitが独自に制限しているためで、現時点では回避策はありません。

要素を全画面表示するには

Javascriptで特定要素を全画面表示するには 要素.requestFullscreen(); メソッドを使用します。
全画面表示を解除するには document.exitFullscreen(); メソッドを使用します。
現在全画面で表示しているかどうかを確認するには document.fullscreenElement プロパティがnullかどうかで判断できます。

全画面表示の例

document全体を全画面表示することができます。

全画面表示と全画面終了

<a onclick="toggleFullScreen(document.documentElement);">全画面表示と全画面終了</a>
<script>
  function toggleFullScreen(obj){
    if(!document.fullscreenElement){
      obj.requestFullscreen();
    }else{
      document.exitFullscreen();
    }
  }
</script>

指定エレメントのみの全画面表示の例

指定の要素のみ全画面表示させることもできます。
以下ではDIV要素を全画面表示させています。

全画面表示と全画面終了

<div id="fullscreen_element" style="background:#fff;">
  <a class="bt102" onclick="toggleFullScreen(document.querySelector('#fullscreen_element'));">
    <span>全画面表示と全画面終了</span>
  </a>
</div>
<script>
  function toggleFullScreen(obj){
    if(!document.fullscreenElement){
      obj.requestFullscreen();
    }else{
      document.exitFullscreen();
    }
  }
</script>

videoタグを全画面表示すれば動画を全画面表示できます。
以下の動画をダブルクリックすると全画面表示になります。