Element: fullscreenchange イベント

fullscreenchange イベントは、ある要素 (Element) が全画面モードに切り替わったり、終了したりした直後に発生します。

バブリング あり
キャンセル 不可
インターフェイス Event
イベントハンドラープロパティ onfullscreenchange

このイベントは、全画面モードへ移行または終了する要素 (Element) へ送られます。

この例では、 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

document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (event) => {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If not, the value
  // of the property is null.
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});

document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    document.getElementById('fullscreen-div').requestFullscreen();
  }
});

仕様書

仕様書 状態
Fullscreen API Living Standard

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
fullscreenchange eventChrome 完全対応 71
完全対応 71
完全対応 57
代替名
代替名 非標準の名前 webkitfullscreenchange を使用しています。
Edge 完全対応 ≤79Firefox 完全対応 64
完全対応 64
未対応 10 — 64
代替名
代替名 非標準の名前 mozfullscreenchange を使用しています。
IE ? Opera 完全対応 44Safari ? WebView Android 完全対応 71
完全対応 71
完全対応 57
代替名
代替名 非標準の名前 webkitfullscreenchange を使用しています。
Chrome Android 完全対応 71
完全対応 71
完全対応 57
代替名
代替名 非標準の名前 webkitfullscreenchange を使用しています。
Firefox Android 完全対応 64
完全対応 64
未対応 10 — 64
代替名
代替名 非標準の名前 mozfullscreenchange を使用しています。
Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報