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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 |
関連記事
- Document.onfullscreenerror
- onfullscreenerrorは、Documentのイベントです。フルスクリーンでエラーが起きた時にfullscreenerrorイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- Document.exitFullscreen()
- exitFullscreen()は、Documentのメソッドです。フルスクリーンを解除します。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- fullscreenchangeイベント
- fullscreenchangeイベントは、フルスクリーンの状態が変化した時に発生するイベントです。