オープンギャラリー：Webでの親子間ウィンドウ間のデータ連携例

■ オープンギャラリー移転のお知らせ ■

このページは5秒後に自動的にhttp://www.os-museum.com/linux/vine26/vine26mainsub.htmにジャンプします。
ページが変らない場合は上記リンクをクリックして下さい。

Webでの親子ウィンドウ間のデータ連携例

Vine Linux 2.6とは直接の関係はありませんが、一つのWebページ(親ウィンドウ)から別のWebページ(子ウィンドウ/サブウィンドウ)を開いた状態で親子ウィンドウ間でのデータ授受の例を紹介します。

尚、今回使用したWebブラウザはNetscape 6です。

１．サンプルウィンドウの説明

親ウィンドウ
親ウィンドウ内に「open sub window」というボタンを設置し、そのボタンを押すと子ウィンドウを表示するようにします。
親ウィンドウから子ウィンドウには二つの引数(パラメタ)を引き渡すものとし、それらの引数はhidden属性のフォーム中に格納させておくようにします。
また、親ウィンドウ内に「code」というテキストボックスを設置し、子ウィンドウからそこに値をセットするようにさせます。
子ウィンドウ
子ウィンドウが開かれた時、すぐに親ウィンドウのパラメタを参照して子ウィンドウに表示させます。
子ウィンドウで項目選択するとその項目のコード値を親ウィンドウ内の「code」というテキストボックスにセットするようにします。

２．親子ウィンドウ表示＆操作例

Netscape 6からはURL欄に「javascript:」を入力するとJavaScriptコンソールが表示されます。
これはJavaScriptのデバッグに役立ちます。

３．ソース

親ウィンドウのソース(main2.htm：実際にテストできますがNetscape 4.7系では子ウィンドウから親ウィンドウへの値設定ができないようです)

<html>
<head>
<title>Main Window 2</title>
<script type="text/javascript">
<!--
function opensubwin(p1,p2){
  document.fsetparm.parm1.value=p1;
  document.fsetparm.parm2.value=p2;
  subwin=window.open("sub2.htm","sub","width=300,height=250");
}
//-->
</script>
</head>
<body>
This is main window 2.<br>
<br>
<form>
<input type="button" value="open sub window" onclick='opensubwin("pdata1","pdata2")'>
</form>
<br>
<br>
<form name="form1">
code : <input type="text" name="code" size="10">
</form>
<form name="fsetparm">
<input type="hidden" name="parm1" value="">
<input type="hidden" name="parm2" value="">
</form>
</body>
</html>

子ウィンドウのソース(sub2.htm)

<html>
<head>
<title>Sub Window 2</title>
<script type="text/javascript">
<!--
function setparm(){
  document.fgetparm.parm1.value=opener.document.fsetparm.parm1.value;
  document.fgetparm.parm2.value=opener.document.fsetparm.parm2.value;
}
//-->
<!--
function setrtnval(p1){
  opener.document.form1.code.value=p1
}
</script>
</head>
<body onload="setparm()" bgcolor="fffff0">
This is sub window 2.<br>
<br>
<div align="right">
<form>
<input type="button" value="close" onclick="javascript:window.close();">
</form>
</div>
<form name="fgetparm">
Input parameters;<br>
parm1 : <input type="text" name="parm1" value="">
<br>
parm2 : <input type="text" name="parm2" value="">
</form>
Please select ap name;<br>
<a href="javascript:setrtnval('1000')">apache</a>(return value=1000)<br>
<a href="javascript:setrtnval('2000')">bind</a>(return value=2000)<br>
<br>
</body>
</html>