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

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

WBOY

リリース： 2016-05-16 16:53:30

オリジナル

1350 人が閲覧しました

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

// さまざまなブラウザーを判断し、 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 を覚えておくと、必要なときに使用できます。