JavaScript - 全画面表示にする

Element.requestFullscreen()

Element.requestFullscreen() メソッドは、要素を全画面表示するための非同期的な要求を発行します。Element.requestFullscreen() の構文は以下のとおりです。

var Promise = Element.requestFullscreen();
Element.requestFullscreen() メソッド

Element.requestFullscreen()() メソッドの返り値は、全画面への移行が完了した場合 undefined の値で解決した Promise オブジェクトを返します。全画面のリクエストが失敗した場合は Promise が例外で拒否される可能性があります。発生しうる例外は以下の通りです。

  • 要素の文書が、全画面への移行ができる状態にない (defaultView がない)。
  • 要素が HTML、SVG、Math の要素ではない。
  • 全画面が許可されていない、または対応していない。
// html 要素を取得
var rootElement = document.documentElement;

// 実行
rootElement.requestFullscreen();
Element.requestFullscreen() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
111264455.115×45
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

Document.exitFullscreen()

全画面表示を解除するには Document.exitFullscreen() メソッドを実行します。Document.exitFullscreen() メソッドは、全画面表示されている要素に向けて、画面を以前の状態に戻すことを要求します。Document.exitFullscreen の構文は以下のとおりです。

exitPromise = document.exitFullscreen();
Document.exitFullscreen() メソッド

Document.exitFullscreen() メソッドの返り値は、ユーザエージェントが全画面表示から完全に抜けたら解決される Promise です。全画面表示から抜けようとしてエラーが発生したら Promisecatch() ハンドラが呼び出されます。

以下の例では、クリックすると全画面表示から抜けるサンプルコードです。

document.onclick = function (event) { 
  if (document.fullscreenElement) { 
    document.exitFullscreen() 
  } 
};
Document.exitFullscreen() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
111264455.115×45
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
23
Shares:
0
Tag:
JavaScript
コードレシピ