第52回 「モーダルダイアログから親ウィンドウに値を渡す」
今回はモーダルダイアログから親ウィンドウにパラメータを渡す方法について説明します。
単純にモーダルダイアログを開くには以下のプログラムでした。（前回のプログラム）
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function mdlg()
{
showModalDialog("sub.html");
}
// --></script>
</head>
<body>
<a href="javascript:mdlg()">ダイアログを開く</a><br>
</body>
</html>
モーダルダイアログからの戻り値を指定するにはモーダルダイアログで開かれるHTML側で返す値を指定しなければなりません。返す値を入れるのが
window.returnValue
です。window.は省略できるので単純に
returnValue
に返す値を入れれば良いことになります。以下のプログラムはフォームに入力された文字列を親ウィンドウに返します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function toMainWin(str)
{
returnValue=str;
close()
}
// --></script>
</head>
<body>
<form>
渡す値<input type="text" name="para"><br>
<input type="button" value="閉じる" onClick="toMainWin(this.form.para.value)">
<br>
</body>
</html>
次に親ウィンドウ側で渡されたデータを受け取るようにしなければなりません。これはshowModalDialog()の戻り値を変数に入れればできあがりです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function mdlg()
{
n = showModalDialog("sub2.html");
alert("戻り値は:"+n);
}
// --></script>
</head>
<body>
<a href="javascript:mdlg()">ダイアログを開く</a><br>
</body>
</html>
モーダルダイアログは使い方によって非常に便利です。あと、もう１つモーダルダイアログがあります。
showModelessDialog
これはshowModalDialogと違い親ウィンドウ側にも制御が移ります。基本的にサブウィンドウと同じです。サブウィンドウとモーダルダイアログ、それぞれ状況に応じて使い分ければ良いでしょう。
次回はサブウィンドウから親ウィンドウを制御する方法について説明します。