JavaScript プログラミング講座

 

フルスクリーンについて

 


■フルスクリーンについて


HTML5 世代の機能です。(実験段階)
 
http://www.w3.org/TR/fullscreen/ (Working Draft)
 
任意のエレメントを、フルスクリーン表示する事ができます。
 
InternetExplorer 10 以前では未対応です。
 
 

 

フルスクリーンを開始する

 
 
 


■フルスクリーン表示が可能か調べる

 
■ドキュメントがフルスクリーン表示可能か調べる
 
document.fullscreenEnabled プロパティを使用します。
 
<IFRAME> 要素内のエレメントのフルスクリーン表示を許可する場合、allowFullscreen プロパティを使用します。
 
■フルスクリーン表示が可能か調べる関数
 
フルスクリーン表示が可能か調べる関数

// ------------------------------------------------------------
// フルスクリーン表示が可能か調べる関数
// ------------------------------------------------------------
function DocumentIsEnabledFullscreen(document_obj){
	return (
		document_obj.fullscreenEnabled ||
		document_obj.webkitFullscreenEnabled ||
		document_obj.mozFullScreenEnabled ||
		document_obj.msFullscreenEnabled ||
		false
	);
}
 
■取得例
 
フルスクリーン表示が可能か調べる

// ------------------------------------------------------------
// フルスクリーン表示が可能か調べる関数
// ------------------------------------------------------------
function DocumentIsEnabledFullscreen(document_obj){
	return (
		document_obj.fullscreenEnabled ||
		document_obj.webkitFullscreenEnabled ||
		document_obj.mozFullScreenEnabled ||
		document_obj.msFullscreenEnabled ||
		false
	);
}


// ------------------------------------------------------------
// 自身のドキュメントがフルスクリーン表示可能か調べる
// ------------------------------------------------------------
var result = DocumentIsEnabledFullscreen(document);

// 出力テスト
console.log(result);

// ------------------------------------------------------------
// インラインフレーム内の要素がフルスクリーン表示可能か調べる
// ------------------------------------------------------------
// HTMLIFrameElement オブジェクトを作成する
var iframe = document.createElement("iframe");

// BODY のノードリストに登録する
document.body.appendChild(iframe);

// フルスクリーン表示を許可する
iframe.allowFullscreen = true;

// Document オブジェクトを取得
var iframe_document = iframe.contentWindow.document;

// インラインフレーム内の要素がフルスクリーン表示可能か調べる
var result = DocumentIsEnabledFullscreen(iframe_document);

// 出力テスト
console.log(result);
 

■任意のエレメントをフルスクリーン表示する

 
■任意のエレメントをフルスクリーン表示する
 
requestFullscreen() メソッドを使用します。
 
マウスやキーボード操作のタイミングで、実行する必要があります
 
Element.requestFullscreen( ) :Void
引数 Voidなし。
戻り値 Voidなし。
 
■任意のエレメントをフルスクリーン表示する関数
 
エレメントをフルスクリーン表示する関数

// ------------------------------------------------------------
// エレメントをフルスクリーン表示する関数
// ------------------------------------------------------------
function ElementRequestFullscreen(element){
	var list = [
		"requestFullscreen",
		"webkitRequestFullScreen",
		"mozRequestFullScreen",
		"msRequestFullscreen"
	];
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		if(element[list[i]]){
			element[list[i]]();
			return true;
		}
	}
	return false;
}
 
■使用例
 
エレメントをクリックすると、フルスクリーン表示する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントをフルスクリーン表示する関数
	// ------------------------------------------------------------
	function ElementRequestFullscreen(element){
		var list = [
			"requestFullscreen",
			"webkitRequestFullScreen",
			"mozRequestFullScreen",
			"msRequestFullscreen"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントをフルスクリーン表示する
		ElementRequestFullscreen(element);

	};

    //-->
    </script>

  </body>
</html>
 

■フルスクリーン表示中のエレメントを取得する

 
■フルスクリーン表示中のエレメントを取得する
 
document.fullscreenElement プロパティを使用します。
 
■フルスクリーン表示中のエレメントを取得する関数
 
フルスクリーン表示中のエレメントを取得する関数

// ------------------------------------------------------------
// フルスクリーン表示中のエレメントを取得する関数
// ------------------------------------------------------------
function DocumentGetFullscreenElement(document_obj){
	return (
		document_obj.fullscreenElement ||
		document_obj.webkitFullscreenElement ||
		document_obj.mozFullScreenElement ||
		document_obj.msFullscreenElement ||
		null
	);
}
 
■取得例
 
フルスクリーン表示中のエレメントを取得する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントをフルスクリーン表示する関数
	// ------------------------------------------------------------
	function ElementRequestFullscreen(element){
		var list = [
			"requestFullscreen",
			"webkitRequestFullScreen",
			"mozRequestFullScreen",
			"msRequestFullscreen"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// フルスクリーン表示中のエレメントを取得する関数
	// ------------------------------------------------------------
	function DocumentGetFullscreenElement(document_obj){
		return (
			document_obj.fullscreenElement ||
			document_obj.webkitFullscreenElement ||
			document_obj.mozFullScreenElement ||
			document_obj.msFullscreenElement ||
			null
		);
	}

	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントをフルスクリーン表示する
		ElementRequestFullscreen(element);

	};

	// ------------------------------------------------------------
	// 一定の時間隔で実行する関数
	// ------------------------------------------------------------
	setInterval(function(){

		// フルスクリーン表示中のエレメントを取得する
		var fullscreen_element = DocumentGetFullscreenElement(document);

		// 出力テスト
		console.log(fullscreen_element);

	},1000);

    //-->
    </script>

  </body>
</html>
 
 

 

フルスクリーンを終了する

 


■フルスクリーンを終了する

 
■フルスクリーンを終了する
 
document.exitFullscreen() メソッドを使用します。
 
Document.exitFullscreen( ) :Void
引数 Voidなし。
戻り値 Voidなし。
 
■フルスクリーンを終了する関数
 
フルスクリーンを終了する関数

// ------------------------------------------------------------
// フルスクリーンを終了する関数
// ------------------------------------------------------------
function DocumentExitFullscreen(document_obj){
	var list = [
		"exitFullscreen",
		"webkitExitFullscreen",
		"mozCancelFullScreen",
		"msExitFullscreen"
	];
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		if(document_obj[list[i]]){
			document_obj[list[i]]();
			return true;
		}
	}
	return false;
}
 
■使用例
 
フルスクリーン表示を終了する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" >
      <input type="button" id="bbb" value="EXIT!!" >
    </div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントをフルスクリーン表示する関数
	// ------------------------------------------------------------
	function ElementRequestFullscreen(element){
		var list = [
			"requestFullscreen",
			"webkitRequestFullScreen",
			"mozRequestFullScreen",
			"msRequestFullscreen"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// フルスクリーンを終了する関数
	// ------------------------------------------------------------
	function DocumentExitFullscreen(document_obj){
		var list = [
			"exitFullscreen",
			"webkitExitFullscreen",
			"mozCancelFullScreen",
			"msExitFullscreen"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(document_obj[list[i]]){
				document_obj[list[i]]();
				return true;
			}
		}
		return false;
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element_a = document.getElementById("aaa");

	// bbb という ID 属性のエレメントを取得する
	var element_b = document.getElementById("bbb");

	// ------------------------------------------------------------
	// イベントリスナーに対応している
	// ------------------------------------------------------------
	if(window.addEventListener){

		// ------------------------------------------------------------
		// エレメントをクリックすると実行されるイベント
		// ------------------------------------------------------------
		element_a.addEventListener("click",function (e){

			// エレメントをフルスクリーン表示する
			ElementRequestFullscreen(element_a);

		});

		// ------------------------------------------------------------
		// ボタンをクリックすると実行されるイベント
		// ------------------------------------------------------------
		element_b.addEventListener("click",function (e){

			// フルスクリーンを終了する
			DocumentExitFullscreen(document);

			// イベント伝達を中断
			e.stopPropagation();
		});
	}

    //-->
    </script>

  </body>
</html>