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

HTML DOM Window openerプロパティとは？使い方とサンプルコードを徹底解説

HTML DOM の window.opener プロパティは、window.open() メソッドによって開かれた子ウィンドウに対して、その親ウィンドウ（呼び出し元のウィンドウ）への参照を返すプロパティです。このプロパティを活用することで、子ウィンドウから親ウィンドウの要素や関数にアクセスしたり、親子間でデータのやり取りを行ったりすることが可能になります。

構文（シンタックス）

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

親ウィンドウへの参照を取得する場合：

window.opener

サンプルコード

それでは、HTML DOM Window opener プロパティの具体的な使用例を見ていきましょう。以下のサンプルでは、URL を入力して子ウィンドウを開き、「Go To」「Close」「Restore」の各ボタンで子ウィンドウを操作すると、その状態に応じて親ウィンドウ側の表示テキストが変化します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window opener</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-opener</legend>
         <input id="urlSelect" type="url" placeholder="Type URL here..."><br>
         <input type="button" value="Go To" onclick="openWindow()">
         <input type="button" value="Close" onclick="closeWindow()">
         <input type="button" value="Restore" 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;
         browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Active";
      }
      function closeWindow(){
         if(browseWindow){
            browseWindow.close();
            browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Closed";
         }
      }
      function restoreWindow(){
         if(browseWindow.closed){
            browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
            browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Restored";
         }
      }
   </script>
</body>
</html>

実行結果

URL フィールドに値を入力した状態で 「Go To」ボタンをクリックした場合：

HTML DOM Window openerプロパティとは？使い方とサンプルコードを徹底解説

「Close」ボタンをクリックした場合：

HTML DOM Window openerプロパティとは？使い方とサンプルコードを徹底解説

「Restore」ボタンをクリックした場合：

HTML DOM Window openerプロパティとは？使い方とサンプルコードを徹底解説

このように window.opener プロパティを使えば、子ウィンドウのライフサイクル（起動・終了・復元）に合わせて、親ウィンドウ側のコンテンツを動的に更新できます。

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