サブウィンドウは非常に役に立つ。

親ウィンドウを見ながらサブウィンドウのフォーム入力を行ったりと非常に便利である。
さらに親ウィンドウからサブウィンドウにデータが渡るとなお良い。

サンプルプログラムを作ってみた。

サブウィンドウを開く。

親ウィンドウの<head>~</head>に下記スクリプトを挿入する。

<head>

<script type="text/javascript">
function openWin(){
  var subWin=window.open("sample.htm","Sample",
  "width=480,height=320,location=no,scrollbars=no,menubar=no");
  subWin.document.myform.keiken.value="100";
  subWin.document.getElementById("ichi").innerHTML="愛知";
}
</script>

<head>

親ウィンドウの<body>~</body>にサブウィンドウを開くHTML文書を挿入。

<a href="JavaScript:openWin()">ウインドウを開く</a>

そうすると、サブウィンドウのフォームのkeikenに100が入り、divのidで指定した値に愛知が入る。

プログラムの説明は以下の通り。

var subWin=window.open
   ("sample.htm","Sample",
"width=480,height=320,location=no,scrollbars=no,menubar=no");

sample.htmを開く。また、開いたサブウィンドウのオブジェクトをsubWinに格納する。
これで、subWinを操作することによりサブウィンドウをいろいろと操れる。

次のSampleはサブウィンドウの名称。2回クリックしてもSampleというサブウィンドウを開くので、2枚サブウィンドウが開かない。

Widthより以下の物はサブウィンドウの設定。widthは幅、heightは高さ、locationはアドレス表示をさせるかどうか、scrollbarsはスクロールバーを表示させるかどうか、menubarはメニューバーを表示させるかどうかを決定する。

subWin.document.myform.keiken.value="100";
subWin.document.getElementById("ichi").innerHTML="愛知";

サブウィンドウ内の値を操作する。
myformのname="keiken"を設定している値を100にする。
id="ichi"としている値を愛知にする。ここでは<div id="ichi"></div>の中身を変更する。

以上で、サブウィンドウを開き、さらに親ウィンドウからサブウィンドウに値を渡すことができた。