[JavaScript]子ウインドウから親ウインドウの関数を実行する

JavaScriptで子ウインドウから親ウインドウの関数を呼び出して、内容を通知する方法をご紹介します。

まずは子ウインドウをオープンするためのHTMLです。名前はmain.htmlとでもします。
onClickイベントでJavaScriptの関数を呼び出すように書いています。

<html>
  <head>
    <script type="text/javascript" src="form.js"></script>
  </head>
  <body>
    <input type="button" id="parent_button" value="子ウインドウを開く" onClick="openChildWindow()">
  </body>
</html>

さらに子ウインドウに表示するchild.htmlはこちら。TESTという文字列を親ウインドウに送ります。
ポイントはopenerという変数です。子ウインドウは開いてくれた親ウインドウを覚えているので、openerの後にJavaScriptで定義した関数を呼び出すことができます。それを利用して、親ウインドウに情報を通知することができます。

<input type="button" value="送信" onClick="opener.sendMsg('TEST')">

そしてJavaScript側です。HTMLの中に書いてもいいですし、別ファイル(例えばform.js)にして、HTMLのヘッダーの中で読み込んでも問題ありません。私は***.jsにして読み込むほうが管理しやすいので、下の例では***.jsにまとめて書くのを前提とした書き方になっています。もしHTMLの中で書く場合は、以下のようにscriptタグでJavaScriptの命令を囲んでください。

<script>
JavaScriptの命令(=***.jsの中身)
</script>

form.js(ファイル名は何でも構いません)の中身です。

/**
 * ----------------------------------------------------------
 * openChildWindow()
 * 子ウインドウを開く
 * ----------------------------------------------------------
 */
function openChildWindow() {
	
  // 子ウインドウを表示
  window.open('child.html', 'Child Window', 'menubar=no, height=300, width=300');
}

/**
 * ----------------------------------------------------------
 * sendMsg()
 * ボタンのvalueを子ウインドウから通知してきた内容に変更
 * @param msg:子ウインドウから受信した文字列
 * ----------------------------------------------------------
 */
function sendMsg(msg) {

  // 親ウインドウのボタンのエレメントを取得
  var button = document.getElementById("parent_button");
  // エレメントのvalueに値を挿入
  button.value = msg;
}

これでmain.htmlとchild.htmlとform.jsの3つのファイルができました。main.htmlをブラウザで読み込んで、「子ウインドウを開く」ボタンを押すと、子ウインドウが開くので、今度は子ウインドウの「送信」ボタンを押してみてください。すると、親ウインドウのボタン名がTESTに変化します。

用途としては、リストなどから選択するような子ウインドウを開いておいて、親ウインドウにはその結果だけを表示するなどのような処理に使えると思います。