Element: fullscreenchange イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
fullscreenchange
イベントは、ある要素 (Element
) が全画面モードに切り替わったり、終了したりした直後に発生します。
このイベントは、全画面モードに移行しようとしている、あるいは全画面モードから脱出しようとしている Element
に送られます。
Element
が全画面モードに移行しようとしているのか、終了しようとしているのかを判別するには、 Document.fullscreenElement
の値をチェックしてください。この値が null
ならば、要素が全画面モードを終了するところであり、そうでなければ全画面モードに移行するところです。
このイベントはキャンセルできません。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("fullscreenchange", (event) => {});
onfullscreenchange = (event) => {};
イベント型
一般的な Event
です。
例
この例では、 fullscreenchange
イベントのハンドラーは、 ID が fullscreen-div
である要素に追加されます。
ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 click
ハンドラーが div
の全画面モードを切り替えます。もし document.fullscreenElement
に値があれば、全画面モードを終了します。そうでなければ、 div は全画面モードに移行します。
fullscreenchange
イベントが処理されたとき、要素の状態はすでに変化していることを思い出してください。よって、全画面モードへ変化した場合は、 document.fullscreenElement
が全画面モードになった要素を指します。一方、 document.fullscreenElement
が null の場合は、全画面モードが取り消されています。
すなわち、この例のコードでは、要素が現在全画面モードである場合、 fullscreenchange
ハンドラーはコンソールへ全画面の要素の id
をログ出力します。 document.fullscreenElement
が null の場合は、このコードは全画面モードが終了した旨をログ出力します。
HTML
<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
<button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
</div>
JavaScript
function fullscreenchanged(event) {
// document.fullscreenElement は、全画面モードにある要素があれば
// それを指します。要素がなければ、このプロパティの値は null に
// あります。
if (document.fullscreenElement) {
console.log(
`Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
);
} else {
console.log("Leaving fullscreen mode.");
}
}
const el = document.getElementById("fullscreen-div");
el.addEventListener("fullscreenchange", fullscreenchanged);
// or
el.onfullscreenchange = fullscreenchanged;
// トグルボタンがクリックされたら、全画面モードを切り替える
document
.getElementById("toggle-fullscreen")
.addEventListener("click", (event) => {
if (document.fullscreenElement) {
// exitFullscreen は Document オブジェクトでのみ使用可
document.exitFullscreen();
} else {
el.requestFullscreen();
}
});
仕様書
Specification |
---|
Fullscreen API Standard # handler-document-onfullscreenchange |
ブラウザーの互換性
BCD tables only load in the browser