window.openerでオープン元のウィンドウ情報を取得する。サブウィンドウを閉じる。

HOME
更新日:2013.10.04
HOMEJavaScript入門 > オープン元参照&ウィンドウを閉じる

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

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

オープン元のページ

まずはオープン元となる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>

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

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

window.opener.document.form名.input名.value
オープン元のフォームの情報を取得する

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

ウィンドウを閉じる

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

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

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

window.close()
ウィンドウを閉じます