fullscreenchange イベント

DOM イベント Event オブジェクト

定義と使用法

フルスクリーンモードで要素を視聴しているときに fullscreenchange イベントが発生します。

注：このイベントは、異なるブラウザで動作するために特定の接頭辞が必要です（以下の例を参照してください）。

ヒント：以下を使用してください element.requestFullscreen() 全画面モードで要素を表示する方法。

ヒント：以下を使用してください element.exitFullscreen() 全画面モードを解除する方法。

例

全画面モードでページを表示しているときにテキストを表示する：

document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});

実際に試してみる

文法

HTML で：

<element onfullscreenchange="myScript">

JavaScript で：

object.onfullscreenchange = function(){myScript});

JavaScript で addEventListener() メソッドを使用する方法：

object.addEventListener("fullscreenchange", myScript);

実際に試してみる

注：Internet Explorer 8 以降のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポートされています
キャンセル可能： サポートされていません
イベントタイプ： Event
サポートされる HTML タグ： すべての HTML 要素

ブラウザのサポート

表の数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。注：各ブラウザには特定の接頭辞が必要です（括弧内を参照してください）：

イベント Chrome IE Firefox Safari Opera
fullscreenchange 45.0 (webkit) 11.0 (ms) 47.0 (moz) 5.1 (webkit) 15.0 (webkit)

例

クロスブラウザ対応のコードに使用される接頭辞：

/* 標準文法 */
document.addEventListener("fullscreenchange", function() {
  ...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
  ...
});
/* Chrome, Safari および Opera */
document.addEventListener("webkitfullscreenchange", function() {
  ...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
  ...
});

実際に試してみる

DOM イベント Event オブジェクト