SYNCERのロゴ
アイキャッチ画像

Document.onfullscreenchange - フルスクリーンの状態が変化した時に発火するイベント

onfullscreenchangeは、Documentのイベントです。フルスクリーンの状態が変化した時にfullscreenchangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。

概要

名前
onfullscreenchange
所属
Document
イベント
fullscreenchange
IDL
attribute EventHandler onfullscreenchange;

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
仕様書
https://fullscreen.spec.whatwg.org/#handler-document-onfullscreenchange

説明

フルスクリーンの状態が変化した時とは、具体的には、開始した時と終了した時です。

チュートリアル

onfullscreenchangeでイベントを設定する例です。

document.onfullscreenchange = function ( event ) {
	console.log( event ) ;
}

Fullscreen APIは2017年10月現在、各ブラウザの実装が進んでいません。それぞれのベンダープレフィクスを考慮する必要があります。

document.onfullscreenchange = document.onmozfullscreenchange = document.onwebkitfullscreenchange = document.onmsfullscreenchange = function ( event ) {
	console.log( event ) ;
}

// Chrome: onwebkitfullscreenchange
// Firefox: onmozfullscreenchange
// Ie: onmsfullscreenchange

Event.addEventListener()でも、同様にイベントを設定できます。

document.addEventListener( "fullscreenchange", function ( event ) {
	console.log( event ) ;
} ) ;

デモ

Document.onfullscreenchangeのデモです。フルスクリーンの状態が変化するごとにイベントが発生し、その回数を出力します。セキュリティの関係で、新しいウィンドウで開かないとフルスクリーンは動作しません。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<body>
	<p><button id="request">実行</button></p>
	<p><button id="exit">解除</button></p>
<hr>
<div id="result">0</div>
<script>
// イベント
var number = 0 ;

document.onfullscreenchange = document.onmozfullscreenchange = document.onwebkitfullscreenchange = document.onmsfullscreenchange = function ( event ) {
	console.log( event ) ;
	document.getElementById( "result" ).textContent = ++number ;
}

// 実行
document.getElementById( "request" ).onclick = function () {
	var element = document.documentElement ;
	element.requestFullscreen = element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen ;
	element.requestFullscreen() ;
}

// 解除
document.getElementById( "exit" ).onclick = function () {
	document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || document.msExitFullscreen ;
	document.exitFullscreen() ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
確認中確認中確認中確認中確認中確認中確認中確認中
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月6日 (金)
コンテンツを公開しました。