オープン元参照&ウィンドウを閉じる

更新日:2019.03.25
  1. HOME
  2. JavaScript入門
  3. オープン元参照&ウィンドウを閉じる

このページでは、サブウィンドウからオープン元である親ウィンドウの情報を取得する方法について解説します。 またサブウィンドウを閉じる方法についても解説します。

オープン元参照

オープン元のファイル

まずオープン元の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>

サンプルページを開いてみると、オープン元のフォームにある2つの隠し属性に記入した 「12345」と「あいうえお」が表示されると思います。このようにwindow.openerを使ってオープン元を参照できます。

ウィンドウを閉じる

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

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

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

楽天booksのJavaScript解説本