From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/element/fullscreenchange_event/index.html | 110 +++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ja/web/api/element/fullscreenchange_event/index.html (limited to 'files/ja/web/api/element/fullscreenchange_event/index.html') diff --git a/files/ja/web/api/element/fullscreenchange_event/index.html b/files/ja/web/api/element/fullscreenchange_event/index.html new file mode 100644 index 0000000000..739e8437d0 --- /dev/null +++ b/files/ja/web/api/element/fullscreenchange_event/index.html @@ -0,0 +1,110 @@ +--- +title: 'Element: fullscreenchange イベント' +slug: Web/API/Element/fullscreenchange_event +tags: + - API + - Fullscreen API + - Fullscreen events + - events + - fullscreen + - fullscreenchange + - イベント + - 全画面 API + - 全画面イベント +translation_of: Web/API/Element/fullscreenchange_event +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Element.onfullscreenchange", "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 APILiving Standard
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.fullscreenchange_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf