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

HTML DOM defaultViewプロパティとは？使い方とサンプルコードをわかりやすく解説

HTML DOMのdefaultViewプロパティは、ウィンドウ上で開かれている現在のドキュメントに関連付けられたwindowオブジェクトを取得するために使用されます。このプロパティを活用することで、画面上の位置情報やウィンドウ名など、ブラウザウィンドウに関するさまざまな情報へアクセスできるようになります。

構文

defaultViewプロパティの基本的な構文は以下のとおりです。

document.defaultView

サンプルコード

それでは、HTML DOM defaultViewプロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h2>defaultView Property example</h2>
<p>Click the below button to get information about the window</p>
<button onclick="winInfo()">Window Info</button>
<p id="Sample"></p>
<script>
    function winInfo() {
      var win = document.defaultView;
      var top = win.screenTop;
      var left = win.screenLeft;
      var name = win.name;
      document.getElementById("Sample").innerHTML = "Distance from screen top: " + top + "<br> Distance from screen left: "+left+"<br> Window name: "+name;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM defaultViewプロパティとは？使い方とサンプルコードをわかりやすく解説

「Window Info」ボタンをクリックすると、以下のようにウィンドウの情報が出力されます。

HTML DOM defaultViewプロパティとは？使い方とサンプルコードをわかりやすく解説

コードの解説

上記の例では、まずユーザーがクリックするとwinInfo()関数が呼び出される「Window Info」ボタンを作成しています。

<button>Window Info</button>

winInfo()関数内では、document.defaultViewプロパティを使ってドキュメントに関連付けられたwindowオブジェクトを取得し、変数winに代入しています。続いて、そのwindowオブジェクトからscreenTop、screenLeft、nameの各プロパティ値を取り出し、それぞれ変数top、left、nameに格納します。

function winInfo() {
    var win = document.defaultView;
    var top = win.screenTop;
    var left = win.screenLeft;
    var name = win.name;
    document.getElementById("Sample").innerHTML = "Distance from screen top: " + top + "<br> Distance from screen left: "+left+"<br> Window name: "+name;
}

screenLeftとscreenTopは、それぞれブラウザウィンドウの左端および上端が画面のどの位置にあるかを示す距離（ピクセル単位）を表します。また、nameプロパティはウィンドウに設定された名前を返し、名前が設定されていない場合はnullが返されます。

  1. HTML DOM Window frameElementプロパティの使い方を徹底解説

    HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素（<embed>、<iframe>、<object>など）を取得するためのプロパティです。ウィンドウがiframeなどの要素に埋め込まれていない場合（トップレベルウィンドウの場合）、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。構文frameElementプロパティの基本的な構文は以下のとおりです。window.frameElement使用例ここでは、HTML DOM

  2. HTML DOMのWindow closedプロパティとは？使い方とサンプルコードを解説

    HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値（boolean）を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。構文Window closedプロパティの構文は以下の通りです。window.closed戻り値：true（ウィンドウが閉じている場合）／ false（ウィンドウが開いている場合）サ