オープン元のページ

まずはオープン元となるHTMLファイルに、 サブウィンドウを開く関数と、サブウィンドウに渡す情報を記入してみましょう。 HTMLのヘッダーに以下のように記入してみて下さい。

function winOpen(){

  window.open("subwin.html","sub");

}

そしてbody内に、以下のフォームを記入します。 サブウィンドウからデータを受け取るために、name属性を付けます。

<form name="sample">
<input type="button" value="サンプル" onclick="WinOpen()">
<input type="hidden" name="suji" value="12345">
<input type="hidden" name="moji" value="あいうえお">
</form>

これでオープン元のHTMLファイルは準備できました。

オープン元を参照する

今度は、サブウィンドウからオープン元のウィンドウを参照してみます。 上述の関数winOpen()ではsubwin.htmlを開くようになっていますので、 そのファイル名でHTMLファイルを作成して下さい。 そしてsubwin.htmlのbody内に以下のように記入します。

<script>

//オープン元を参照して変数に代入する
var num=window.opener.document.sample.suji.value;
var str=window.opener.document.sample.moji.value;

document.write(num+"<br>");
document.write(str+"<br>");

</script>

サンプルページを開いてみると、オープン元のフォームにある２つの隠し属性に記入した 「12345」と「あいうえお」が表示されると思います。

上記のコードにあるように、window.openerを使ってオープン元を参照します。 続く部分に、フォームの隠し属性のデータを取得するコードを書きます。 隠し属性のデータを取得する方法は以下の通りです。

window.opener.document.form名.input名.value

オープン元のフォームの情報を取得する

inputタグは別に隠し属性だけでなく、テキストボックスやセレクトボックスでも使えます。

ウィンドウを閉じる

サブウィンドウを閉じる方法について触れておきます。 今回作ったsubwin.htmlのbody内に、以下のフォームを付け足して試してみてください。

<form>
<input type="button"value="閉じる" onclick="window.close()">
</form>

ウィンドウを閉じるには、window.close()を使います。 ブラウザのウィンドウが１つしか開いていない場合は、機能しません。

window.close()

ウィンドウを閉じます