[JavaScript] サブウィンドウから親ウィンドウを参照する（window.opener）

投稿日：2016年10月2日更新日：2018年5月3日

サブウィンドウから親ウィンドウを参照するには、window.openerで参照できます。

サンプルソース

例）子画面（sub.html）で入力された値を親画面（main.html）にセットする

<html lang="ja">
<head>
<meta charset="utf-8">
<title>親画面サンプル</title>
<script>
function openwindow(){
  var win = window.open('sub.html');
}
</script>
</head>
<body>
  <input type="text" id="oyaTxt1" value="">
  <input type="button" value=" サブウィンドウを開く " onclick="openwindow();">
</body>
</html>

<head>

<title>親画面サンプル</title>

function openwindow(){

var win = window.open('sub.html');

}

</script>

</head>

<body>

</body>

</html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>子画面サンプル</title>
<script>
function kakutei(){
  if(!window.opener || window.opener.closed){
    alert("呼び出し元が既に閉じられています。");
    return false;
  }

  var koTxt = document.getElementById('koTxt1').value;  //子画面の値を取得
  var oyaTxt = window.opener.document.getElementById('oyaTxt1');  //値をセットするオブジェクトを取得
  if(oyaTxt != null){  //値をセットする先が存在する場合は値をセットする
    oyaTxt.value = koTxt
  }

  window.close();
}
</script>
</head>
<body>
  <input type="text" id="koTxt1" value="hoge">
  <input type="button" value=" 確定 " onclick="kakutei();">
</body>
</html>

<head>

<title>子画面サンプル</title>

function kakutei(){

if(!window.opener || window.opener.closed){

alert("呼び出し元が既に閉じられています。");

return false;

}

var koTxt = document.getElementById('koTxt1').value; //子画面の値を取得

var oyaTxt = window.opener.document.getElementById('oyaTxt1'); //値をセットするオブジェクトを取得

if(oyaTxt != null){ //値をセットする先が存在する場合は値をセットする

oyaTxt.value = koTxt

}

window.close();

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

ここに子画面で入力された値がセットされます。

解説

window.openで開いたウィンドウは、window.openerで親ウィンドウを参照できます。
（window.openの詳細は「サブウィンドウを開く」を参照ください。）

子画面から親画面へ値を渡したい場合は、以下のように親画面のオブジェクトを取得して value等へ値を渡せばOKです。

var obj = window.opener.document.getElementById('＜親画面のテキストボックス等のID＞');

1	var obj = window.opener.document.getElementById('＜親画面のテキストボックス等のID＞');

子画面を閉じたい場合は、以下のようにすれば閉じることができます。

window.close();

1	window.close();

その他メモ

親画面が既に閉じられている状態で値をセットするとjavascriptエラーとなります。
エラーを回避したい場合は、値をセットする前にwindow.openerで取得したオブジェクトをnull判定すればOKです。

執筆者：とら