Document: fullscreenchange イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
fullscreenchange イベントは、ブラウザーが全画面モードに移行したり終了したりした直後に発生します。
このイベントは、全画面モードに移行または終了しようとしている Element に送られ、それから Document までバブリングします。
Element が全画面モードに移行しようとしているのか、終了しようとしているのかを判別するには、 Document.fullscreenElement の値をチェックしてください。この値が null ならば、要素が全画面モードを終了するところであり、そうでなければ全画面モードに移行するところです。
このイベントはキャンセルできません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("fullscreenchange", (event) => {}); onfullscreenchange = (event) => {}; イベント型
一般的な Event です。
例
fullscreenchange イベントのログ記録
この例では、 fullscreenchange イベントのハンドラーが Document に追加されます。
ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 click ハンドラーは div の全画面モードを切り替えます。もし document.fullscreenElement に値があれば、全画面モードを終了します。そうでない場合は、 div は全画面モードに配置されます。
fullscreenchange イベントが処理される時点で、要素の状態はすでに変化していることを覚えておいてください。そのため、もし変更が全画面モードへのものであれば、 document.fullscreenElement は、これで全画面モードになった要素を指すことになります。他にも、 document.fullscreenElement が null の場合、全画面モードは取り消される可能性があります。
この例のコードで意味しているのは、ある要素が現在全画面モードである場合、 fullscreenchange ハンドラーは全画面要素の id をコンソールにログ出力するということです。もし document.fullscreenElement が null ならば、このコードは全画面モードを離れるための変更であることをメッセージとしてログ出力します。
HTML
<h1>fullscreenchange イベントの例</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">全画面モードの切り替え</button> <pre id="logger"></pre> </div> CSS
* { box-sizing: border-box; } #fullscreen-div { height: 150px; padding: 1rem; background-color: pink; } #logger { height: 80px; padding: 0 0.5rem; background-color: white; overflow: scroll; } JavaScript
const logger = document.querySelector("#logger"); const fullScreenElement = document.querySelector("#fullscreen-div"); function log(message) { logger.textContent = `${logger.textContent}\n${message}`; } function fullscreenchanged(event) { // document.fullscreenElement は、全画面モードにある要素があれば // それを指します。要素がなければ、このプロパティの値は null に // なります。 if (document.fullscreenElement) { log(`要素: ${document.fullscreenElement.id} が全画面モードに入りました。`); } else { log("全画面モードを終了しました。"); } } document.addEventListener("fullscreenchange", fullscreenchanged); // トグルボタンがクリックされたら、全画面モードを切り替える document.getElementById("toggle-fullscreen").addEventListener("click", () => { if (document.fullscreenElement) { // exitFullscreen は Document オブジェクトでのみ使用可 document.exitFullscreen(); } else { fullScreenElement.requestFullscreen(); } }); 仕様書
| Specification |
|---|
| Fullscreen API # handler-document-onfullscreenchange |