window.openとopenerの使い方｜親子画面連携【JavaScript入門】

この記事は、2026年10月時点のWHATWG HTML Living StandardとMDN Web Docsに基づいています。対象：HTML Living Standard（2026年10月時点）。特定のブラウザーやバージョンでの画面表示・動作は対象にしていません。

JavaScriptで別画面を開いたあと、開いた画面と元の画面をどう連携させればよいのでしょうか。

この記事では、ボタンで別画面を開き、双方から文字を渡す例を紹介します。子画面の準備ができたことを確認してから操作する手順や、別の場所から開いた画面を操作するときの制限も説明します。

この記事は、JavaScriptのウィンドウ操作を学ぶ一項目です。学習の全体像を知りたい場合は、JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイドもあわせてご覧ください。

結論：子画面の準備ができてから連携する

window.open()は別画面を開き、開いた画面を参照する値を返します。開いた画面から元の画面を参照するには、window.openerを使います。

ただし、ポップアップが止められた場合や、2つの画面のオリジンが異なる場合は、できる操作が変わります。また、子画面が読み込みを終える前に操作すると、子画面に用意した処理がまだ使えないことがあります。この記事の例では、子画面から「準備できた」と親画面に知らせてから操作します。

noopenerを指定すると、開いた画面から元の画面を参照できなくなります。親子画面の直接の連携が必要な場合は、この指定を使うと連携できなくなる点に注意してください。

window.open()の書き方と戻り値

window.open()には、開く先や開いた画面の名前などを指定できます。たとえば、次のように書きます。

const childWindow = window.open("child.html", "childWindow");

このコードは、同じ場所にあるchild.htmlを開きます。画面を開けた場合は、開いた画面を参照する値が返ります。

実行結果：

画面を開く処理が実行されます。開けた場合は、子画面を参照する値がchildWindowに入ります。

ポップアップが止められた場合など、画面を開けなければ戻り値はnullになります。値があるかを確かめずに使うと、子画面を操作するところでエラーになることがあります。

window.open()の戻り値は、親画面から子画面を操作するときに使えます。一方、noopenerを指定すると戻り値がnullになるため、この方法での親子連携はできません。

親画面と子画面の関係

ある画面から開いた側を「親画面」、開かれた側を「子画面」と呼びます。親画面はwindow.open()の戻り値で子画面を参照し、子画面はwindow.openerで親画面を参照します。

ただし、相手の画面を参照できることと、画面の中身まで自由に操作できることは同じではありません。オリジンが異なる画面では、ページ内の操作に制限があります。

次の図は、親画面と子画面の参照関係を示しています。矢印は参照の向きを表し、noopenerを指定した場合や異なるオリジンの場合の制限も示しています。

親画面・子画面のコードを用意して試す

次の例では、親画面のボタンで子画面を開きます。子画面が準備できたことを親画面に知らせてから、親画面から子画面へ文字を渡します。子画面から親画面へも文字を渡せます。

2つのファイルを同じ場所に保存し、ホームページとして表示するための仕組みから開きます。ファイルをダブルクリックして直接開く方法ではなく、後述する簡易サーバーを使います。

1. 親画面のファイルを作る

parent.htmlという名前で保存します。HTMLは、ホームページの文章やボタンなど、ページの内容を組み立てるための決まりです。子画面を開くボタンと、文字を送るボタンを用意します。文字を送るボタンは、子画面の準備ができる前に押しても、未準備であることを画面に表示します。

コード中のidは、ページ内の部品を見分けるために付ける名前です。addEventListenerは、ボタンが押されたときに行う処理を登録します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>親画面</title>
</head>
<body>
  <h1>親画面</h1>
  <button id="openChild">子画面を開く</button>
  <button id="sendToChild">子画面へ文字を送る</button>
  <p id="parentMessage">ここに状態や子画面からの文字が表示されます。</p>

  <script>
    let childWindow = null;
    let childReady = false;

    function updateParent(message) {
      document.getElementById("parentMessage").textContent = message;
    }

    window.setChildReady = function () {
      childReady = true;
      updateParent("子画面の準備ができました。文字を送れます。");
    };

    function openChild() {
      childReady = false;
      childWindow = window.open("child.html", "childWindow");

      if (childWindow === null) {
        updateParent("画面を開けませんでした。ポップアップの設定を確認してください。");
        return;
      }

      updateParent("子画面を開きました。準備ができるまでお待ちください。");
    }

    function sendToChild() {
      if (childWindow === null || childWindow.closed) {
        updateParent("先に子画面を開いてください。");
        return;
      }

      if (!childReady) {
        updateParent("子画面の準備がまだできていません。表示が変わってから操作してください。");
        return;
      }

      childWindow.showMessage("親画面からのメッセージです。");
    }

    document.getElementById("openChild").addEventListener("click", openChild);
    document.getElementById("sendToChild").addEventListener("click", sendToChild);
  </script>
</body>
</html>

実行結果：

親画面に「子画面を開く」「子画面へ文字を送る」のボタンと、状態を表示する文章が表示されます。子画面を開く前に送信ボタンを押すと、「先に子画面を開いてください。」と表示されます。

このコードでは、childWindowに開いた画面を記録します。子画面が閉じていないかをclosedで確認し、準備ができたかどうかも確かめてから文字を送ります。

2. 子画面のファイルを作る

child.htmlという名前で、親画面と同じ場所に保存します。子画面の準備ができたら、親画面へ知らせます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>子画面</title>
</head>
<body>
  <h1>子画面</h1>
  <p id="childMessage">親画面からの文字は、ここに表示されます。</p>
  <button id="sendToParent">親画面へ文字を送る</button>

  <script>
    window.showMessage = function (message) {
      document.getElementById("childMessage").textContent = message;
    };

    document.getElementById("sendToParent").addEventListener("click", function () {
      if (window.opener !== null && !window.opener.closed) {
        window.opener.updateParent("子画面からのメッセージです。");
      }
    });

    if (window.opener !== null && !window.opener.closed) {
      window.opener.setChildReady();
    }
  </script>
</body>
</html>

このコードでは、window.openerが親画面を参照できるかを確かめてから、親画面の処理を呼び出します。親画面と子画面は同じオリジンから開く必要があります。

実行結果：

子画面に「親画面からの文字は、ここに表示されます。」という文章と、「親画面へ文字を送る」ボタンが表示されます。親画面から開かれた場合は、準備完了を親画面に知らせます。

3. 簡易サーバーを起動して表示する

この手順では、Python 3の簡易サーバーを使います。Pythonは、コンピューターへの指示を書くためのプログラミング言語です。Python 3はその第3世代の版です。この簡易サーバーを使うには、Python 3が必要です。Python 3がない場合は、公式サイトから入手してインストールします。

WindowsではPython公式サイトのダウンロードページで、Windows向けのPython 3を選び、表示されるインストーラーをダウンロードします。ダウンロードしたファイルを開き、画面の案内に従ってインストールします。インストール後はPowerShellでpy --versionを実行し、Python 3のバージョンが表示されることを確認します。

macOSではPython公式サイトのダウンロードページで、macOS向けのPython 3インストーラーを選びます。ダウンロードしたインストーラーを開き、画面の案内に従ってインストールします。インストール後はターミナルでpython3 --versionを実行し、Python 3のバージョンが表示されることを確認します。

公式のダウンロード先と、環境ごとの使い方は次の資料で確認できます。

• Python公式サイト：ダウンロード
• Python公式ドキュメント：Windowsでの利用
• Python公式ドキュメント：macOSでの利用

次に、親画面と子画面のファイルを保存し、簡易サーバーを起動します。

1. parent.htmlとchild.htmlを、同じフォルダーに保存します。
2. そのフォルダーを開き、WindowsではPowerShell、macOSではターミナルを起動します。
3. Windowsではpy -m http.server 8000 --bind 127.0.0.1、macOSではpython3 -m http.server 8000 --bind 127.0.0.1を入力して実行します。
4. ブラウザーでhttp://127.0.0.1:8000/parent.htmlを開きます。
5. 「子画面を開く」を押し、親画面の表示が「子画面の準備ができました。文字を送れます。」に変わるまで待ちます。

実行結果：

手順3で簡易サーバーが起動します。ブラウザーで指定したページを開くと、親画面と「子画面を開く」「子画面へ文字を送る」のボタンが表示されます。

画面には、親画面の見出しと2つのボタン、状態を表示する文章が表示されます。画面の見た目は利用するブラウザーや環境によって異なる場合があります。

4. 画面間で文字を渡す

1. 親画面の表示が「子画面の準備ができました。文字を送れます。」に変わるまで待ちます。
2. 親画面の「子画面へ文字を送る」を押します。子画面に「親画面からのメッセージです。」と表示されます。
3. 子画面の「親画面へ文字を送る」を押します。親画面に「子画面からのメッセージです。」と表示されます。

実行結果：

親画面の送信ボタンを押すと、子画面の文章が「親画面からのメッセージです。」に変わります。子画面の送信ボタンを押すと、親画面の文章が「子画面からのメッセージです。」に変わります。

親画面と子画面には、それぞれ送信後の文章が表示されます。

準備ができる前に操作した場合

子画面が読み込みを終える前は、子画面に定義したshowMessage()がまだ使えないことがあります。この例では、親画面の表示が「子画面の準備ができました。文字を送れます。」に変わってから操作してください。

準備ができる前にボタンを押すと、「子画面の準備がまだできていません」と親画面に表示されます。表示が変わってからもう一度操作します。

実行結果：

子画面の準備が終わる前に送信ボタンを押すと、親画面に「子画面の準備がまだできていません。表示が変わってから操作してください。」と表示されます。

同じオリジンと異なるオリジンでできること

異なるオリジンの画面でも、すべての操作が禁止されるわけではありません。ただし、相手のページの中身を自由に読み書きすることはできません。

同じオリジンかどうかは、サイト名だけでは決まりません。通信方法や接続番号も含めて一致する必要があります。異なるオリジンの画面間で情報を渡したい場合は、postMessageを使う方法があります。

ページ内に別のページを表示する枠であるiframeや、別画面とのメッセージのやり取りについては、postMessageの使い方｜iframe・別ウィンドウ間の送受信【JavaScript入門】で確認できます。

noopenerを使う場合の注意点

子画面から親画面を参照する必要がない場合は、noopenerを指定できます。開いた先の画面から元の画面を参照されないようにする指定です。

noopenerを指定すると、子画面からwindow.openerを使った連携はできません。また、window.open()の戻り値がnullになるため、戻り値から子画面を操作することもできません。

window.open("child.html", "_blank", "noopener");

実行結果：

子画面は開きますが、開いた画面から元の画面を参照できません。このコードでは、親子画面の直接連携に使う参照も得られません。

通常のリンクで別画面を開く場合は、リンクにtarget="_blank"とrel="noopener"を指定する方法もあります。親子画面の直接連携が必要かどうかを、先に決めてください。

よくある問題と確認方法

ボタンを押しても別画面が開かない

window.open()がクリックなどの操作に直接結び付いていないと、ブラウザーが自動で開く画面を止めることがあります。ブラウザーの設定でポップアップを止めている場合もあります。

• ボタンを押したときに、すぐwindow.open()を呼び出しているか確認します。
• ブラウザーのポップアップ設定で、対象のページが許可されているか確認します。
• 戻り値がnullかを確認し、開けなかった場合の表示を用意します。

実行結果：

この記事のコードでは、画面を開けなかった場合、親画面に「画面を開けませんでした。ポップアップの設定を確認してください。」と表示されます。

子画面の準備ができる前に操作した

子画面の準備ができる前は、親画面から子画面の処理を呼び出せないことがあります。この記事のコードでは、親画面の表示が「子画面の準備ができました。文字を送れます。」に変わるまで待ってください。

「子画面の準備がまだできていません」と表示された場合は、子画面が開いていることを確認し、準備完了の表示が出てからもう一度ボタンを押します。

実行結果：

親画面に準備完了の文章が表示されたあとに送信すると、子画面にメッセージが表示されます。

戻り値がnullになり、子画面を操作できない

ポップアップが止められた場合は、戻り値がnullになることがあります。また、noopenerを指定した場合も戻り値はnullです。

ポップアップを許可しているか、noopenerを指定していないかを確認します。親子画面の連携が必要な場合は、設定を見直してください。

実行結果：

戻り値がnullの場合、この記事の親画面のコードでは、子画面を参照する操作には進まず、画面を開けなかったことを表示します。

子画面のページ内を操作できない

親画面と子画面のオリジンが異なると、子画面のページ内を自由に操作することはできません。サイト名だけでなく、通信方法や接続番号も含めて、同じオリジンかを確認します。

異なるオリジン間で情報を渡す必要がある場合は、ページ内を直接操作する方法ではなく、postMessageの使い方｜iframe・別ウィンドウ間の送受信【JavaScript入門】で紹介するメッセージを使う方法を検討してください。

実行結果：

異なるオリジンの画面では、相手のページ内を自由に読み書きできません。メッセージを送る方法を使う場合は、送信先を指定して情報をやり取りします。

親画面を参照できない

window.openerがnullなら、子画面から親画面を参照できません。noopenerを指定した場合などは、親子画面の直接連携ができません。

親画面との直接連携が必要かを確認し、必要であればnoopenerを使う場合との違いを整理してください。異なるオリジンの画面同士で連携する場合は、相手のページを直接操作せず、メッセージを使う方法を検討します。

実行結果：

window.openerがnullの場合、子画面から親画面の処理を呼び出すことはできません。

仕様を確認するときの資料

HTML Standardは、ホームページの表示や動作に関する決まりをまとめた文書です。MDN Web Docsは、Webページを作る人向けに、ブラウザーの機能や使い方を説明する公開資料です。

この記事は特定のブラウザーやバージョンに対象を限定していません。ブラウザーによって、ポップアップの扱いや画面を開く方法などに違いがある場合は、利用するブラウザーの資料で該当する機能とバージョンを確認してください。

• HTML Standard：window.open()
• MDN：Window.open()
• MDN：Window.opener
• MDN：同一オリジンに関する制限
• MDN：Window.postMessage()