フルスクリーンについて


// ------------------------------------------------------------
// フルスクリーン表示が可能か調べる関数
// ------------------------------------------------------------
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>

上に戻る

前のページに戻る