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

HTML Windowのselfプロパティとは？使い方をサンプルコードで解説

HTMLのWindowオブジェクトが持つselfプロパティは、現在ブラウザ上で開いているウィンドウ（自分自身のウィンドウ）への参照を返すプロパティです。主に、現在のウィンドウが最上位（トップレベル）のウィンドウかどうかを判定したい場合などに活用されます。

selfプロパティの構文

selfプロパティの基本的な構文は以下の通りです。

window.self

window.selfはwindowオブジェクトそのものを参照するため、実質的にはwindowと同じ意味になります。ただし、window.topと比較することで、「現在のウィンドウがiframeなどで入れ子になっていないか」を簡単にチェックできる点が大きな特徴です。

HTML Window selfプロパティの使用例

それでは、実際にselfプロパティを使ったサンプルコードを見てみましょう。以下の例では、ボタンをクリックすると「現在のウィンドウが最上位のウィンドウであるかどうか」を判定して結果を表示します。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 30%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show{
        font-size:1.2rem;
    }
</style>
<body>
<h1>HTML Window self Property Demo</h1>
<button onclick="create()" class="btn">Check current window is topmost using self property</button>
<div class="show"></div>
<script>
    function create(){
        if(window.top === window.self){
            document.querySelector('.show').innerHTML='The current window is the topmost window';
        } else{
            document.querySelector('.show').innerHTML='The current window is not the topmost window';
        }
    }
</script>
</body>
</html>

実行結果

HTML Windowのselfプロパティとは？使い方をサンプルコードで解説

上記のコードを実行すると、グラデーション背景のページにボタンが表示されます。

次に、「Check current window is topmost using self property」というボタンをクリックしてみましょう。すると、JavaScript内でwindow.top === window.selfの比較が行われ、現在のウィンドウが最上位のウィンドウかどうかが画面に表示されます。

HTML Windowのselfプロパティとは？使い方をサンプルコードで解説

このページがiframeなどで埋め込まれていない通常の状態で開かれている場合は「The current window is the topmost window（現在のウィンドウは最上位のウィンドウです）」と表示され、逆にiframeの中で読み込まれている場合は「The current window is not the topmost window（現在のウィンドウは最上位のウィンドウではありません）」と表示されます。

まとめ

  • window.selfは、現在のウィンドウ自身への参照を返すプロパティ。
  • window.selfとwindow.topを比較することで、現在のウィンドウがトップレベルかどうかを判定できる。
  • iframeやフレーム構造の中でスクリプトが動作しているかどうかのチェックに便利。

このように、selfプロパティはシンプルながらも、ウィンドウの階層構造を確認する際に役立つ便利なプロパティです。ぜひ実際にコードを動かして挙動を確認してみてください。

  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（ウィンドウが開いている場合）サ