はじめに

ページに埋め込んだiframe要素に対し、全画面表示をする必要が有りました。実装の際に学んだ事をここに記します。

この記事の対象者

ページ内にiframeを埋め込む人
埋め込んだiframeを全画面表示したい人
埋め込んだiframeが全画面表示されない人

iframeを全画面表示する

iframeを埋め込む親ページの設定

全画面表示を可能にする

allowfullscreen属性もしくはallow属性を指定します。

<iframe src="埋め込むiframeページURL" allowfullscreen/>

もしくは

<iframe src="埋め込むiframeページURL" allow="fullscreen"/>

以上の指定でiframe上での全画面表示を可能にします。

全画面表示を禁止する

逆に全画面表示を禁止する場合は以下のように設定します。

<iframe src="埋め込むiframeページURL" allow="fullscreen 'none'"/>

iframe側の設定

全画面表示する処理

iframe側では全画面表示を実行する為のメソッドを記述します。

const openFullScreen = () => {
    document.documentElement.requestFullscreen();
}

以上のメソッドを呼び出すことで全画面表示が実行されます。注意して欲しいのはrequestFullscreen()は要素に対して実行出来るので、document.requestFullscreen()では実行出来ないので注意して下さい。

また、ブラウザによってメソッド名が異なるという厄介な問題があります。私の知る限り以下の4つのメソッドがrequestFullscreen()と同様のメソッドです。

document.documentElement.requestFullscreen();
document.documentElement.webkitRequestFullScreen();
document.documentElement.mozRequestFullScreen();
document.documentElement.msRequestFullscreen();

困りますね…私は以下のような実装をしました。

const requestFullscreens = [
    "requestFullscreen",
    "webkitRequestFullScreen",
    "mozRequestFullScreen",
    "msRequestFullscreen",
];

for (let i = 0; i < requestFullscreens.length; i++) {
    if (document.documentElement[requestFullscreens[i]]) {
        document.documentElement[requestFullscreens[i]]();
        break;
    }
}

メソッド名を配列にまとめて、for文で回してdocumentElementにメソッドが存在するかをチェックして、存在する場合はメソッドを実行してfor文をbreakする実装にしました。

全画面解除する処理

const closeFullScreen = () => {
    document.exitFullscreen();
}

以上のメソッドを呼び出すことで全画面表示が解除されます。requestFullscreen()とは異なりdocumentオブジェクトに対して実行します。

また、requestFullscreen()と同様にブラウザによって実行可能なメソッド名が異なります。

document.exitFullscreen;
document.webkitExitFullscreen;
document.mozCancelFullScreen;
document.msExitFullscreen;

こちらも同様に以下のような処理で対策を行いました。

const exitFullscreens = [
    "exitFullscreen",
    "webkitExitFullscreen",
    "mozCancelFullScreen",
    "msExitFullscreen",
];

for (let i = 0; i < exitFullscreens.length; i++) {
    if (document[exitFullscreens[i]]) {
        document[exitFullscreens[i]]();
        break;
    }
}

全画面表示可能かどうかを判断する

ブラウザによって全画面表示させるメソッドが異なる場合がありましたが、ブラウザや環境によっては全画面表示が実行不可能な場合があります。その場合は全画面表示関連の挙動は制御する必要があります。

判断の方法は以下のようになります。

if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
    // 全画面表示ボタンを非表示にする処理
}

以上のいずれかのプロパティがtrueで返らなかった場合は全画面表示は実行不可能ですので、全画面表示関連の処理や見た目を制御するようにすれば対応完了です。

fullscreen関連のエラーメッセージ

Uncaught (in promise) TypeError: fullscreen error

全画面表示可能かどうかを判断せずにrequestFullscreen()を実行した際、全画面表示が実行不可能な環境の場合は以上のメッセージが表示されます。

その原因として考えられるのは私が調べた限り親ページで全画面表示を禁止している場合が考えられます。もしくはfullscreenに対するブラウザの互換性が対応出来ていない場合があります。

他にも原因があるのであればコメントで教えていただければと思います。

Twitterもやってます。

埋め込んだiframeで全画面表示(fullscreen)をする