exitFullscreen() メソッド
Element.exitFullscreen()
exitFullscreen() メソッドは、全画面として表示されたエレメントを元の表示に戻すメソッドです。
全画面表示にするには requestFullscreen() メソッドを使用します。
document.getElementById('fullscreen_btn').addEventListener('click', function() {
var elem_ = document.getElementById("example");
if( document.fullscreenElement ){
document.exitFullscreen();
} else {
if (elem_.requestFullscreen) {
elem_.requestFullscreen();
}
}
}
上記の例はfullscreen_btn
ボタンをクリックすることで全画面表示の切り替えが実行されることを想定したコードになっています。
全画面として表示されるのはexample
という id をもつ <div> エレメントです。exitFullscreen() メソッドは全画面で表示されたこのエレメントを閉じます。
全画面表示になっているか／否かは document.fullscreenElement プロパティから確かめています。exitFullscreen() メソッドは必ず全画面表示がされている状態で実行するようにします。
ページ内 Index
構文（Syntax）
全画面を閉じるための exitFullscreen() の構文です。
Promise = Element.exitFullscreen();
このメソッドを実行する前に全画面を表示かを document.fullscreenElement プロパティによって確認したほうがよいでしょう。
返り値は Promise です。この返り値からエラーが起きた場合の処理を分岐することができます。
引数（Parameter Values）
引数はありません。
返り値（Return Values）
返り値は、コールバック関数が成功した場合と失敗した場合に振り分ける Promise となっています。
document.getElementById('fullscreen_btn').addEventListener('click', function() {
var elem_ = document.getElementById("example");
if( document.fullscreenElement ){
var re_exitfull = document.exitFullscreen();
re_exitfull.then( ()=>{} );
re_exitfull.catch( (err)=>{ alert(`error occurred : ${err.message} (${err.name})`) } );
} else {
if (elem_.requestFullscreen) {
elem_.requestFullscreen();
}
}
}
Promise はエラーが起きた場合の処理を then()、catch() で分岐することができます。
Example
exitFullscreen() メソッドの例です。
以下の例は全画面モード切り替え
ボタンをクリックすることで全画面モードの切り替えが行われます。
ここでは <iframe> 内でコードの実行画面が表示されます。属性に allowfullscreen を指定しないと許可されない場合があります。
CSS の内容は機能を確かめるために作成したもので最適なものではありません。