Document.fullscreenEnabled - フルスクリーンにできるか?
fullscreenEnabledは、Documentのプロパティです。ドキュメントが、フルスクリーン表示が可能か否かを返します。例えば、同一オリジンポリシーに違反していてフルスクリーンにできない状態ではfalseが返ります。
概要
- 名前
- fullscreenEnabled
- 所属
- Document
- IDL
[LenientSetter] readonly attribute boolean fullscreenEnabled;
- 仕様書
- https://fullscreen.spec.whatwg.org/#dom-document-fullscreenenabled
チュートリアル
Fullscreen APIは2017年10月現在、各ブラウザの実装が進んでいません。それぞれのベンダープレフィクスを考慮する必要があります。
// プロパティ名の統一
if ( document.mozFullScreenEnabled !== undefined ) {
document.fullscreenEnabled = document.mozFullScreenEnabled ; // Firefox
} else if ( document.webkitFullscreenEnabled !== undefined ) {
document.fullscreenEnabled = document.webkitFullscreenEnabled ; // Chrome、Safari
} else if ( document.msFullscreenEnabled !== undefined ) {
document.fullscreenEnabled = document.msFullscreenEnabled ; // Ie
}
if ( document.fullscreenEnabled === undefined ) {
console.log( "未対応です。" ) ;
}
デモ
Document.fullscreenEnabledのデモです。下記は、こことは違うドメイン(syncer.ch)のページをiframe要素で表示したものです。iframe要素内では同一オリジンポリシーの関係で実行不可(false)、ページを直接開いている場合は実行可(true)という結果になります。
// プロパティ名の統一
if ( document.mozFullScreenEnabled !== undefined ) {
document.fullscreenEnabled = document.mozFullScreenEnabled ; // Firefox
} else if ( document.webkitFullscreenEnabled !== undefined ) {
document.fullscreenEnabled = document.webkitFullscreenEnabled ; // Chrome、Safari
} else if ( document.msFullscreenEnabled !== undefined ) {
document.fullscreenEnabled = document.msFullscreenEnabled ; // Ie
}
// 確認
document.getElementById( "fullscreenEnabled" ).textContent = document.fullscreenEnabled ;
console.log( document.fullscreenEnabled ) ;
// 実行
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() ;
}
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 |
関連記事
- Document.onfullscreenchange
- onfullscreenchangeは、Documentのイベントです。フルスクリーンの状態が変化した時にfullscreenchangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- Document.exitFullscreen()
- exitFullscreen()は、Documentのメソッドです。フルスクリーンを解除します。
- DocumentOrShadowRoot.fullscreenElement
- fullscreenElementは、DocumentOrShadowRootのプロパティです。フルスクリーン表示中の要素を返します。存在しない場合はnullを返します。現在、フルスクリーン中か否かの判定にも利用して下さい。
- fullscreenchangeイベント
- fullscreenchangeイベントは、フルスクリーンの状態が変化した時に発生するイベントです。