HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM exitFullscreen()メソッドとは？使い方とサンプルコードを解説

HTML DOMのexitFullscreen()メソッドは、現在フルスクリーンモードで表示されている要素を通常モードに戻すために使用します。なお、フルスクリーンモードにない要素に対して実行しても、何も起こりません。

構文

exitFullscreen()メソッドの構文は以下の通りです。

HTMLElementObject.exitFullscreen()

サンプルコード

それでは、exitFullscreen()メソッドの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    var docEle = document.documentElement;
    function GoNormal() {
       if (document.exitFullscreen)
       document.exitFullscreen();
    }
    function GoFullscreen() {
       if (docEle.requestFullscreen)
       docEle.requestFullscreen();
    }
</style>
</head>
<body>
<h1>exitFullscreen() method example</h1>
<img src="EiffelTower.jpg" width="200px" height="200px">
<p>The Eiffel Tower was built on 28 January 1887</p>
<button onclick="GoFullscreen();">Fullscreen View</button>
<button onclick="GoNormal();">Normal view</button>
</body>
</html>

実行結果

上記のコードを実行すると、以下のように表示されます。

HTML DOM exitFullscreen()メソッドとは？使い方とサンプルコードを解説

「Fullscreen View」ボタンをクリックすると、次のように画面が切り替わります。

HTML DOM exitFullscreen()メソッドとは？使い方とサンプルコードを解説

キーボードのEscキーを押すか、「Normal view」ボタンをクリックすると、元の画面サイズに戻ります。

コードの解説

上記の例では、「Fullscreen View」と「Normal view」の2つのボタンを作成しています。ユーザーがこれらのボタンをクリックすると、それぞれGoFullscreen()関数とGoNormal()関数が実行される仕組みです。

<button onclick="GoFullscreen();">Fullscreen View</button>
<button onclick="GoNormal();">Normal view</button>

GoFullscreen()関数では、まずdocument.documentElementを使ってドキュメントのルート要素（HTML文書の場合は<html>要素）を取得します。次に、requestFullscreenプロパティの有無を確認し、まだフルスクリーンモードでない場合には、<html>要素に対してrequestFullscreen()メソッドを呼び出してフルスクリーン表示に切り替えます。なお、ルート要素以外の任意の要素を指定することも可能で、その場合はその要素のみがフルスクリーンで表示されます。

function GoFullscreen() {
    if (docEle.requestFullscreen)
    docEle.requestFullscreen();
}

一方、GoNormal()関数では、documentオブジェクトのexitFullscreenプロパティの有無を確認します。画面がフルスクリーンモード（つまり通常表示ではない）の場合には、documentのexitFullscreen()メソッドを呼び出して通常表示へ戻します。

function GoNormal() {
    if (document.exitFullscreen)
    document.exitFullscreen();
}
  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや