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

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() ;
}

サポート状況

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