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 の定義
現行の標準 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onfullscreenchangeChrome 完全対応 45Edge 完全対応 12Firefox 完全対応 64
完全対応 64
未対応 47 — 65
無効
無効 From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 10 — 65
代替名
代替名 非標準の名前 onmozfullscreenchange を使用しています。
IE 完全対応 11
代替名
完全対応 11
代替名
代替名 非標準の名前 onMSFullscreenChange を使用しています。
Opera 完全対応 ありSafari ? WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 64
完全対応 64
未対応 47 — 65
無効
無効 From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 10 — 65
代替名
代替名 非標準の名前 onmozfullscreenchange を使用しています。
Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報