オープン元参照＆ウィンドウを閉じるJavaScript入門

オープン元参照

オープン元のファイル

まずオープン元のHTMLファイルには以下のように記入します。

<button onclick="winOpen()">サンプル</button>

<form name="sample">
<input type="hidden" name="suji" value="12345">
<input type="hidden" name="moji" value="あいうえお">
</form>

<script>
function winOpen(){
  window.open("subwin.html","sub");
}
</script>

フォームにname属性を付け値を「sample」にしています。またinputタグには隠し属性「hidden」とname属性を付け、それぞれ値を「suji」，「moji」にしています。

サブウィンドウのスクリプト

サブウィンドウの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を使ってオープン元を参照できます。

ウィンドウを閉じる

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

<button onclick="window.close()">閉じる</button>

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