javascript 全画面表示に変更する

作成日 2020.12.02
更新日 2022.07.26
javascript
javascript

javascriptで、requestFullscreenメソッドを使用して、全画面表示に切り替えるサンプルコードを記述してます。全画面モードを終了することも可能です。

1. 環境
2. requestFullscreenメソッド使い方
3. safari15.5の場合
4. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

requestFullscreenメソッド使い方

「requestFullscreen」メソッド使用すると、簡単に全画面表示に切り替えることが可能です。

document.documentElement.requestFullscreen();

requestFullscreenメソッド使い方

let ele = document.documentElement;

ele.requestFullscreen();

実際に実行してみます。

<button id="btn" type="button">実行</button>

<script>

let ele = document.documentElement;

document.getElementById("btn").addEventListener ( 
  "click", function(){     
    ele.requestFullscreen();
  } 
)

</script>

※chrome103で実行してます

firefox 102の場合は、以下のようになります。

全画面表示を終了する場合は、「exitFullscreen」を使用します。

document.exitFullscreen()

safari15.5の場合

safari15.5の場合は「requestFullscreen」では、フルスクリーンにならないので「webkitRequestFullscreen」を使用します。

<button id="btn" type="button">実行</button>

<script>

let ele = document.documentElement;

document.getElementById("btn").addEventListener ( 
  "click", function(){     
    ele.webkitRequestFullscreen();
  } 
)

</script>

また、全画面表示を終了する場合は、「webkitCancelFullScreen」を使用します。

document.webkitCancelFullScreen()

ただし「webkitRequestFullscreen」は「firefox102」ではエラーが発生します。

※Uncaught TypeError: ele.webkitRequestFullscreen is not a function

なので、個々のブラウザに対応するには、条件式を指定して実行する必要があります。
※ここでは「mozRequestFullScreen」というfirefox用のフルスクリーンにするメソッドを追加してます。

<button id="btnStrat" type="button">開始</button>
<button id="btnEnd" type="button">終了</button>

<script>

let ele = document.documentElement;

// フルスクリーン実行
document.getElementById("btnStrat").addEventListener(
    "click", function () {
        if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen() // Chrome, Safari
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen() // firefox
        } else if (ele.requestFullscreen) {
            ele.requestFullscreen() // HTML5 Fullscreen API
        } else {
            alert('未対応')
            return
        }
    }
)

// フルスクリーン終了
document.getElementById("btnEnd").addEventListener(
    "click", function () {
        if (ele.webkitRequestFullscreen) {
            document.webkitCancelFullScreen() // Chrome, Safari
        } else if (ele.mozRequestFullScreen) {
            document.mozCancelFullScreen() // firefox
        } else if (ele.requestFullscreen) {
            document.exitFullscreen() // HTML5 Fullscreen API
        }
    }
)

</script>

サンプルコード

以下は、
「全画面モード」ボタンをクリックして、全画面モードへ移行して、
「終了」ボタンをクリックで、全画面モードを終了する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50 mx-auto" style="margin-top:200px">

    <h5><span class="badge badge-secondary">全画面モードに切り替え</span></h5>

    <button type="button" class="btn btn-primary" onclick="hoge()">全画面モード</button>
    <button type="button" class="btn btn-warning" onclick="foo()">終了</button>

  </div>

  <script>
   
    let ele = document.documentElement;

    function hoge() {

       // 全画面表示      
      if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen() // Chrome, Safari
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen() // firefox
      } else if (ele.requestFullscreen) {
        ele.requestFullscreen() // HTML5 Fullscreen API
      } else {
        alert('未対応')
        return
      }

    };

    function foo() {
      // 全画面表示　終了
      if (ele.webkitRequestFullscreen) {
        document.webkitCancelFullScreen() // Chrome, Safari
      } else if (ele.mozRequestFullScreen) {
        document.mozCancelFullScreen() // firefox
      } else if (ele.requestFullscreen) {
        document.exitFullscreen() // HTML5 Fullscreen API
      }
    };

  </script>
</body>

</html>

全画面モードに切り替えされていることが確認できます。