さまざまなブラウザの全画面モードを制御するための JavaScript メソッド、プロパティ、イベントの紹介_JavaScript スキル

コードをコピー コードは次のとおりです:

// さまざまなブラウザーを判断し、 find 正しいメソッドは
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
要素です。 mozRequestFullScreen( );
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

//全画面で起動します!
launchFullScreen(document.documentElement) //Web ページ全体
launchFullScreen(document.getElementById("videoElement")); //特定のページ要素

全画面で表示したいページ要素で全画面メソッドを呼び出します。ブラウザ ウィンドウは全画面表示になりますが、最初にユーザーは全画面モードを許可するように求められます。ユーザーは全画面モードを拒否する可能性が高いことに注意してください。ユーザーが全画面モードで実行すると、ブラウザのツールバーやその他のボタン メニューが非表示になり、ページが画面全体を覆うことになります。

全画面モードを終了します

この exitFullscreen メソッド (ブラウザのプレフィックスも必要) により、ブラウザは全画面モードを終了し、通常モードに変わります。

コードをコピー コードは次のとおりです:

// ブラウザの種類を決定します
関数exitFullscreen( ) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (ドキュメント .webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

//全画面モードを終了します!
exitFullscreen();

exitFullscreen は、全画面表示の開始時に渡されるオブジェクトではなく、ドキュメント オブジェクトによってのみ呼び出すことができることに注意してください。

全画面プロパティとイベント

残念ながら、イベントのフルスクリーン プロパティと関連メソッドでもブラウザ プレフィックスを追加する必要がありますが、これはすぐには必要なくなると思います。

1.document.fullScreenElement: 全画面で表示される Web ページ要素。
2.document.fullScreenEnabled: 現在全画面状態であるかどうかを判断します。

全画面表示が開始されたとき、または全画面表示が終了したときに、fullscreenchange イベントがトリガーされます:

コードをコピーします コードは次のとおりです。

var fullscreenElement = document.fullscreenElement || document .mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

上記の方法を引き続き使用して、このイベントにプレフィックスを付けるブラウザの種類を決定できます。

全画面スタイル CSS

さまざまなブラウザでは、全画面モード用の非常に便利な CSS スタイル ルールが提供されています。

コードをコピー コードは次のとおりです:

:-webkit-full-screen {
/ * プロパティ * /
}

:-moz-full-screen {
/* プロパティ */
}

:-ms-fullscreen {
/* プロパティ */
}

:full-screen { /*事前仕様 */
/* プロパティ */
}

:fullscreen { /* 仕様 */
/* プロパティ */
}

/* より深い要素 */
:-webkit-full-screen video {
幅: 100%;
高さ: 100%;
}

/* 背景のスタイル設定*/
::backdrop {
/* プロパティ */
}
::-ms-backdrop {
/* プロパティ */
}

場合によっては、WebKit スタイルが問題を引き起こす可能性があるため、これらのスタイルはシンプルにしておく方がよいでしょう。

これらの全画面 API は非常にシンプルで非常に便利です。私がこの API を初めて見たのは、MDN の BananaBread デモでした。これは、フルスクリーン状態を検出するためにイベント リスニングを使用するだけのシューティング ゲームでした。これらの便利な API を覚えておくと、必要なときに使用できます。