親ウィンドウからサブウィンドウのページを切り替える

説明

親ウィンドウからサブウィンドウを操作するにはwindow.open()の戻り値を変数に入れておきます。この戻り値がサブウィンドウを操作するためのものになります。window.open()の戻り値はサブウィンドウを示すことになるためサンプルのように、変数subWinにwindow.open()の戻り値を入れた場合、subWin.location.hrefとすることでサブウィンドウのページURLを変更することができます。同様にsubWin.document.bgColorとするとサブウィンドウの背景色を参照/設定することができます。
ただし、サブウィンドウの内容が別ドメインのページなどに更新された場合はセキュリティの関係で参照することができなくなります。 サブウィンドウが閉じられてしまった場合には操作することができずにエラーになります。サブウィンドウが閉じられているかどうかはclosedプロパティで調べることができます。例えば変数subWinにwindow.open()の戻り値が入っている場合、subWin.closedとして調べることができます。closedプロパティがtrueであれば閉じられている、falseであれば閉じられていないことになります。
JavaScriptテクニック ブック  詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>親ウィンドウからサブウィンドウのページを切り替える</h1>
<ul id="myfLink">
<li><a href="http://www.yahoo.co.jp/" class="ctrlWindow">Yahoo</a></li>
<li><a href="http://www.google.co.jp/" class="ctrlWindow">Google</a></li>
<li><a href="http://www.openspc2.org/">OpenSpace*</a></li>
<li><a href="http://www.goo.ne.jp/" class="ctrlWindow">goo</a>
<li><a href="http://www.excite.co.jp/">Excite*</a></li>
</ul>
</body>
</html>

var subWin = window.open("sub.html", "sbwin1","width=480,height=320");
window.onload = function(){
var root = document.getElementById("myfLink");
var aTag = root.getElementsByTagName("a");
for (var i=0; i<aTag.length; i++){
if (aTag[i].className.match(/ctrlWindow/)){
aTag[i].onclick = function(){
subWin.location.href = this.href;
return false;
}
}
}
}