Document.exitFullscreen() - フルスクリーンを解除する

2017/10/06

exitFullscreen()は、Documentのメソッドです。フルスクリーンを解除します。

概要

名前

exitFullscreen

所属

IDL

Promise<void> exitFullscreen();

仕様書

https://fullscreen.spec.whatwg.org/#dom-document-exitfullscreen

説明

引数はありません。Promiseを返します。

チュートリアル

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

//メソッド名を統一
document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || document.msExitFullscreen ;

// 実行
document.exitFullscreen() ;

このメソッドはPromiseを返すため、解除の完了したタイミングで処理ができるとされていますが、2017年10月現在、対応しているブラウザはありません。

document.exitFullscreen().then( function () {
	console.log( "フルスクリーンを解除しました!!" ) ;
} ) ;

デモ

Document.exitFullscreen()のデモです。「実行」をクリックしてフルスクリーンにした後、「解除」をクリックするとメソッドを実行してフルスクリーンを解除します。セキュリティの関係で、新しくページを開かないと動作しません。

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

<!DOCTYPE html>
<body>
	<p><button id="request">実行</button></p>
	<p><button id="exit">解除</button></p>
<script>
// 実行
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>