requestFullscreen() メソッド
Element.requestFullscreen()
requestFullscreen() メソッドは、対象となるエレメントを全画面に表示するメソッドです。
モバイルといった小さな画面では切り替わらない、または切り替わったように見えないようです。
全画面表示を解除し元の状態にするには exitFullscreen() を使用します。
document.getElementById('fullscreen_btn').addEventListener('click', function() {
var elem_ = document.getElementById("example");
if( document.fullscreenElement ){
document.exitFullscreen();
} else {
if (elem_.requestFullscreen) {
elem_.requestFullscreen();
}
}
}
詳しくは Example を参照してください
上記の例はボタンをクリックすることで全画面表示の切り替えが行われることを想定したコードになっています。
全画面として表示されるのはexample
という id をもつ <div> エレメントです。
全画面として表示できるエレメントとできないエレメントがあります。document.fullscreenEnabled が true であれば全画面表示にすることができます。
<iframe> エレメントではallowfullscreen
属性によってが全画面表示の許可が必要な場合もあります。
全画面に切り替わる場合は、fullscreenchange イベントが発生します。エラーの場合は fullscreenerror イベントが発生します。
または返り値が Promise ですので、この返り値からエラーが起きた場合の処理を分岐することができます。
ページ内 Index
構文（Syntax）
エレメントを全画面に表示するための requestFullscreen() の構文です。navigationUI を表示するか／否かを options として指定できます。
Promise = Element.requestFullscreen( [options] );
全画面として表示できるエレメントとできないエレメントがあります。document.fullscreenEnabled によって全画面表示できるかを確認することができます。
document.getElementById('fullscreen_btn').addEventListener('click', function() {
var elem_ = document.getElementById("example");
if( document.fullscreenEnabled ){
if( document.fullscreenElement ){
document.exitFullscreen();
} else {
if (elem_.requestFullscreen) {
elem_.requestFullscreen();
}
}
} else {
alert( 'Element is not able to be in fullscreen mode' );
}
}
<iframe> エレメントではallowfullscreen
属性によってが全画面表示の許可が必要な場合もあります。
全画面に切り替わる場合は、fullscreenchange イベントが発生します。エラーの場合は fullscreenerror イベントが発生します。
引数（Parameter Values）
requestFullscreen() メソッドの引数は何も指定しなくても前画面表示になります。
navigationUI を表示にするには "navigationUI: show" と明確に指定したほうがよいようです。ただし、 options を引数として渡すことができますが機能しないブラウザがあります。
| Value | 摘要 |
|---|---|
| options | navigationUI を表示するか／否かの指定。デフォルトでは"auto"でブラウザの機能に合わせる。"hide"で非表示、"show"で表示になる |
返り値（Return Values）
requestFullscreen() メソッドの返り値は、コールバック関数が成功した場合と失敗した場合に振り分けることができる Promise となっています。
以下のようにエラー処理を分岐することができます。
document.getElementById('fullscreen_btn').addEventListener('click', function() {
var elem_ = document.getElementById("example");
if( document.fullscreenElement ){
document.exitFullscreen();
} else {
if (elem_.requestFullscreen) {
var re_fullscreen = elem_.requestFullscreen();
re_fullscreen.then( ()=>{} );
re_fullscreen.catch( (err)=>{ alert(`error occurred : ${err.message} (${err.name})`) } );
}
}
}
Promise はエラーが起きた場合の処理を then()、catch() で分岐することができます。
省略して以下のように編集することもできます。
document.getElementById('fullscreen_btn').addEventListener('click', function() {
var elem_ = document.getElementById("example");
if( document.fullscreenElement ){
document.exitFullscreen();
} else {
if (elem_.requestFullscreen) {
elem_.requestFullscreen()
.then( ()=>{} )
.catch( (err)=>{ alert(`error occurred : ${err.message} (${err.name})`) } );
}
}
}
Example
requestFullscreen() メソッドの例です。
requestFullscreen() メソッドは、対象となるエレメントを全画面に表示するメソッドです。全画面に表示できるエレメントとできないエレメントがあることに注意してください。全画面表示が可能かは fullscreenEnabled プロパティで知ることができます。
以下の例では、全画面モード切り替え
ボタンをクリックすることで全画面モードの切り替えが行われます。
ここでは <iframe> 内でコードの実行画面が表示されます。属性に allowfullscreen を指定しないと許可されない場合があります。
CSS の内容は機能を確かめるために作成したもので最適なものではありません。
全画面表示から元の状態に戻すには Element.exitFullscreen() メソッドによってもできます。