Element.onfullscreenchange
Element インターフェイスの onfullscreenchange プロパティは、 fullscreenchange イベントのイベントハンドラーで、要素が全画面モードへ移行するか、終了するときに発生します。
構文
targetDocument.onfullscreenchange = fullscreenChangeHandler;
値
fullscreenchange イベントのイベントハンドラーで、要素が全画面モードへ移行または終了したことを示します。
例
この例では fullscreenchange イベントのハンドラーである handleFullscreenChange() を作成します。この関数は event.target のチェックしてどの要素に対して呼び出されたのかを判別し、文書の fullscreenElement の値と要素を比較して、同じノードであるかどうかを確認します。
これを isFullscreen の値に設定して adjustMyControls() という関数に渡し、これがウィンドウ内が全画面モードで表示されているときにアプリのユーザーインターフェイスが最適に表示されるように調整する関数になると想像してください。
function toggleFullscreen() {
let elem = document.querySelector("video");
elem.onfullscreenchange = handleFullscreenChange;
if (!document.fullscreenElement) {
elem.requestFullscreen().then({}).catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
function handleFullscreenChange(event) {
let elem = event.target;
let isFullscreen = document.fullscreenElement === elem;
adjustMyControls(isFullscreen);
}
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Fullscreen API onfullscreenchange の定義 |
現行の標準 | 初回定義 |
ブラウザーの互換性
No compatibility data found for api.Document.onfullscreenchange.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.