javascript エラー「Uncaught TypeError: document.documentElement.webkitRequestFullscreen is not a function」が発生した場合の解決方法

作成日 2022.09.10
javascript
javascript

javascriptで、エラー「Uncaught TypeError: document.documentElement.webkitRequestFullscreen is not a function」が発生した場合の対処法を記述してます。

1. 環境
2. エラー全文
3. 原因
4. 解決方法

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ Firefox 104.0.2

Javascript サンプル集はこちら

エラー全文

以下のコードで発生。

<button id="btn" type="button">フルスクリーン</button>

<script>

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

</script>

エラー全文

Uncaught TypeError: document.documentElement.webkitRequestFullscreen is not a function

画像

原因

「webkitRequestFullscreen」は、「firefox」で有効にならないため

解決方法

「mozRequestFullScreen」か「requestFullscreen」を使用して、各ブラウザに対応できるようにする

<button id="btn" type="button">フルスクリーン</button>

<script>

document.getElementById("btn").addEventListener(
    "click", function () {
        if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen() // Chrome, Safari
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen() // firefox
        } else if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen() // HTML5 Fullscreen API
        } else {
            alert('未対応')
            return
        }
    }
)

</script>