「JavaScript」孫画面から親画面にアクセス(その逆も)

JavaScript で孫画面から親画面へのアクセス、また、その逆のアクセスをやってみたので、メモしておきます ( あんまり使う場面はなさそうですが・・・ )

それぞれのボタンの value を取得するといった場合、以下の感じでできました。

■ parent.html

<!DOCTYPE html>
<head>
<title>parent</title>
<script type="text/javascript">
// 孫画面の参照代入用の変数
var grandchildWindow;

function childOpen() {
  window.open("child.html", "child")
}

function getGrandchildBtn() {
  // 孫画面の id="ccc" の値を取得 ※３
  var v1 = grandchildWindow.document.getElementById('ccc').value;
  alert(v1);
}
</script>
</head>
<body>
<input type="button" id="aaa" value="aaa" onclick="childOpen();"/><br>
<input type="button" id="bbb" value="bbb" onclick="getGrandchildBtn();"/>
</body>
</html>

■ child.html

<!DOCTYPE html>
<head>
<title>child</title>
<script type="text/javascript">
window.onload = function() {
  window.open("grandchild.html", "grandchild");
}
</script>
</head>
<body>
child.html
</body>
</html>

■ grandchild.html

<!DOCTYPE html>
<head>
<title>grandchile</title>
<script type="text/javascript">
window.onload = function() {
  // 自分の window オブジェクトを親画面の grandchildWindow に代入 ※２
  window.opener.opener.grandchildWindow = window;
}

function getParentBtn() {
  // 親画面の id="aaa" の値を取得 ※１
  var v2 = window.opener.opener.document.getElementById('aaa').value;
  alert(v2);
}
</script>
</head>
<body>
<input type="button" id="ccc" value="ccc" onclick="getParentBtn();"/>
</body>
</html>

孫画面から親画面のアクセスは、window.opener で子画面の参照を取得して、さらにその参照の opener で親画面の参照を取得するといった感じでやってます ( サンプルの ※１の箇所 )。

親画面から孫画面のアクセスは、孫画面で自分の window オブジェクトを親画面の変数に代入して ( ※２の箇所 )、親画面ではその変数使って孫画面にアクセスするって感じになります ( ※３の箇所 )。

簡単ですが、以上です。

[ 環境情報 ]
Windows 7 SP1
Internet Explorer 11