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

DocumentOrShadowRoot.fullscreenElement - フルスクリーン表示中の要素

fullscreenElementは、DocumentOrShadowRootのプロパティです。フルスクリーン表示中の要素を返します。存在しない場合はnullを返します。現在、フルスクリーン中か否かの判定にも利用して下さい。

概要

名前
fullscreenElement
所属
DocumentOrShadowRoot
IDL
[LenientSetter] readonly attribute Element? fullscreenElement;
仕様書
https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement

説明

フルスクリーン表示中の要素を返す。存在しない場合はnullを返す。

チュートリアル

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

// プロパティ名の統一
if ( document.mozFullScreenElement !== undefined ) {
	document.fullscreenElement = document.mozFullScreenElement ;	// Firefox

} else if ( document.webkitFullscreenElement !== undefined ) {
	document.fullscreenElement = document.webkitFullscreenElement ;	// Chrome、Safari

} else if ( document.msFullscreenElement !== undefined ) {
	document.fullscreenElement = document.msFullscreenElement ;	// Ie

}

if ( document.fullscreenElement === undefined ) {
	console.log( "未対応です。" ) ;
}

デモ

DocumentOrShadowRoot.fullscreenElementのデモです。フルスクリーン中の要素を監視しています。セキュリティの関係で、新しいウィンドウで開かないとフルスクリーンは動作しません。

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

<!DOCTYPE html>
<body>
	<p><button id="request">実行</button></p>
	<p><button id="exit">解除</button></p>
<hr>
<div id="result"></div>
<script>
// 確認
setInterval( function () {
	// プロパティ名の統一
	if ( document.mozFullScreenElement !== undefined ) {
		document.fullscreenElement = document.mozFullScreenElement ;	// Firefox
	} else if ( document.webkitFullscreenElement !== undefined ) {
		document.fullscreenElement = document.webkitFullscreenElement ;	// Chrome、Safari
	} else if ( document.msFullscreenElement !== undefined ) {
		document.fullscreenElement = document.msFullscreenElement ;	// Ie
	}

	var value = document.fullscreenElement ;

	if ( lastValue !== value ) {
		document.getElementById( "result" ).textContent = "" ;
		console.log( value ) ;
		document.getElementById( "result" ).appendChild( new Text( value ) ) ;
	}

	lastValue = value ;
}, 100 ) ;

var lastValue = "" ;

// 実行
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
20+ 9+ 6.0+ 11+ 16+× 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月6日 (金)
コンテンツを公開しました。