備忘録的プログラミングリファレンス

fullscreenEnabled プロパティ

Document.fullscreenEnabled

　fullscreenEnabled プロパティは、web ページ内の要素が全画面に表示できるかを返すプロパティです。このプロパティは document オブジェクトのプロパティです。

　全画面として表示できるエレメントとできないエレメントがあります。fullscreenEnabled プロパティによって、全画面への表示切り替えを行う requestFullscreen() メソッドが使用できるかを知ることができます。

fullscreenEnabled プロパティ
document.getElementById('fullscreen_btn').addEventListener('click', function() {
	var elem_ = document.getElementById("example");
	if( document.fullscreenEnabled ){
		if( document.fullscreenElement ){
			document.exitFullscreen();
		} else {
			if (elem_.requestFullscreen) {
				elem_.requestFullscreen();
			}
		}
	} else {
		alert( 'Element is not able to be in fullscreen mode' );
	}
}

詳しくは Example を参照してください

　上記の例はボタンをクリックすることで全画面表示の切り替えが行われることを想定したコードになっています。
　全画面として表示されるのはexampleという id をもつ <div> エレメントです。

　全画面として表示できるエレメントとできないエレメントがあります。document.fullscreenEnabled が true であれば全画面表示をすることができます。
　allowfullscreen などといったエレメントが全画面表示の許可されているか／否かが必要な場合もあります。

　全画面への表示切り替えについては requestFullscreen() メソッドページを参照してください。

ページ内 Index

構文（Syntax）

　web ページ内の要素が全画面に表示できるかを返す fullscreenEnabled の構文です。
　返り値は true / false を返す Boolean 型です。

Boolean = Element.fullscreenEnabled;

返り値（Return Values）

　fullscreenEnabled プロパティの返り値です

type摘要
Booleantrue...全画面表示にできる、false... 全画面表示にできない

Example

　fullscreenEnabled プロパティの例です。

　fullscreenEnabled プロパティは、web ページ内の要素が全画面に表示できるかを返すプロパティです。このプロパティは document オブジェクトのプロパティです。

　以下の例では、全画面モード切り替えボタンをクリックすることで全画面モードの切り替えが行われます。その際に全画面表示ができる場合はアラートでその旨が表示されます。

　CSS の内容は機能を確かめるために作成したもので最適なものではありません。

　ここでは <iframe> 内でコードの実行画面が表示されます。属性に allowfullscreen を指定しないと許可されない場合があります。ここでは指定しなくても動くようです。

関連（Related）