window.openとwindow.showModalDialogを使用して、子画面と親画面のやりとりをする

JavaScript
    • 親画面の実装
      • 子画面の呼び出し
window.showModalDialog('./childscreen', window);

showModalDialogの第2引数に親画面のwindowオブジェクトを格納する。
これにより、親画面のwindowオブジェクトを子画面で参照することができる。

      • 子画面からのデータの受け取り
//子画面を開き、子画面が閉じられた場合に子画面で設定された値を受け取る
	var returnVal = window.showModalDialog('./childscreen', window);
	alert("戻り値：" + returnVal);

window.showModalDialogの戻り値に、子画面で設定したデータが格納されている。
なお、親画面のreturnValに値が設定されるのは、子画面が閉じられたタイミングである。
それまで親画面の処理は止まっている。

    • 子画面の実装
      • 親画面からのデータの受け取り

親画面で、window.showModalDialogの第2引数にwindowオブジェクトを渡した。
showModalDialogの第2引数は、子画面ではwindowオブジェクトのdialogArgumentsとして受け取ることができる*1。
従って、次のようにして親画面のwindowオブジェクトを子画面で取得できる。

//子画面のwindowオブジェクトのdialogArgumentsから親画面のwindowオブジェクトを取得する
var parentWindowObject = window.dialogArguments;
      • 親画面へのデータの送信

msdnのマニュアルには、showModalDialogの戻り値は次の説明がある。

数値、文字列、その他の値を返す。これは、URLで指定されたドキュメントによってセットされたreturnValueプロパティの値に合致する。

従って、子画面で次のように実装すれば、子画面が閉じられた際にshowModalDialog関数の戻り値として親画面に値が戻る。

//親画面に戻す値をオブジェクトとして準備
var obj = {
		value1 : "test1",
		value2 : "test2"
	};
//親画面に値が戻るように、子画面のwindowオブジェクトのreturnValueフィールドにコピー
window.returnValue = obj;


-子画面を非モーダルで開く場合

    • 親画面の実装
      • 子画面の呼び出し
//モーダルダイアログとは異なり、戻り値は子画面のwindowオブジェクト
var childWindowObject = window.open('./childscreen', '新規に開くウィンドウ名');
      • 子画面からのデータの受け取り
    • 子画面の実装
      • 親画面からのデータの受け取り

windowオブジェクトのopenerプロパティ*2を利用して、親画面のwindowドキュメントを取得する。それを用いて親画面のDOMにアクセスする。
例えば、次のコードでは親画面のid属性がidのvalue属性の値を取得している。

window.opener.document.getElementById(id).value
      • 親画面へのデータの送信

親画面の要素に子画面からアクセスして書き換える。

window.opener.document.getElementById(id).value = '子画面での入力値';

*1:msdnのshowModalDialogのマニュアルに記載がある

*2:openerプロパティは、window.open()メソッドを実行したスクリプトが含まれるウィンドウやフレームを参照する