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

HTML DOM Window parentプロパティとは？親ウィンドウへの参照を取得する方法

HTML DOM の Window parent プロパティは、子ウィンドウの親ウィンドウへの参照を返すプロパティです。window.open() で開いた別ウィンドウや iframe から、元になった親ウィンドウの要素やスクリプトへアクセスしたい場合に活用できます。

構文

親ウィンドウへの参照を取得するには、次のように記述します。

window.parent

サンプルコード

HTML DOM Window parent プロパティの使用例を見てみましょう。テキストフィールドに入力した URL を子ウィンドウとして開き、「移動」「閉じる」「復元」の各ボタンで子ウィンドウを制御します。その際、parent.document.getElementById() を通じて、親ウィンドウ側の表示エリアに状態メッセージを出力しています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window parent</title>
<style>
    * {
        padding: 2px;
        margin: 5px;
    }
    form {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Window-parent</legend>
            <input id="urlSelect" type="url" placeholder="URLを入力してください..."><br>
            <input type="button" value="移動" onclick="openWindow()">
            <input type="button" value="閉じる" onclick="closeWindow()">
            <input type="button" value="復元" onclick="restoreWindow()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var urlSelect = document.getElementById("urlSelect");
        var winSource;
        function openWindow() {
            browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
            winSource = urlSelect.value;
            parent.document.getElementById("divDisplay").textContent = "子ウィンドウがアクティブです";
        }
        function closeWindow(){
            if(browseWindow){
                browseWindow.close();
                parent.document.getElementById("divDisplay").textContent = "子ウィンドウを閉じました";
            }
        }
        function restoreWindow(){
            if(browseWindow.closed){
                browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
                parent.document.getElementById("divDisplay").textContent = "子ウィンドウを復元しました";
            }
        }
    </script>
</body>
</html>

実行結果

URL フィールドに入力して「移動」ボタンをクリックすると、指定した URL が子ウィンドウで開かれます。

HTML DOM Window parentプロパティとは？親ウィンドウへの参照を取得する方法

「閉じる」ボタンをクリックすると、子ウィンドウが閉じられます。

HTML DOM Window parentプロパティとは？親ウィンドウへの参照を取得する方法

「復元」ボタンをクリックすると、閉じた子ウィンドウが同じ URL で再度開かれます。

HTML DOM Window parentプロパティとは？親ウィンドウへの参照を取得する方法

ポイントまとめ

  • window.parent は読み取り専用で、常に親ウィンドウの Window オブジェクトへの参照を返します。
  • 自身がトップレベルウィンドウである場合、window.parent は自分自身（window.self と同じオブジェクト）を返します。
  • 異なるオリジンのページ間ではセキュリティ制限（同一オリジンポリシー）により、親ウィンドウの DOM へのアクセスが制限される点に注意しましょう。
  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（ウィンドウが開いている場合）サ