第53回 「サブウィンドウから親ウィンドウを制御する」
今回はサブウィンドウから親ウィンドウを制御する方法について説明します。
その前に注意点としてはサブウィンドウまわりはブラウザのバージョンによって不具合が出る可能性もあります。（多くはWindows版Internet Explorer 5.0で、5.1などパッチをあてるかバージョンアップすれば直ります）
サブウィンドウから親ウィンドウを制御する前に親ウィンドウからサブウィンドウを操作してみます。以前にもサブウィンドウに文字列を書き出しましたが、やり方は同じです。以下のプログラムはリンクがクリックされたらサブウィンドウにYahoo, Googleのページを表示します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
mySubWin = window.open("sub3.html","sub","width=320,height=240");
}
function setURL(url)
{
mySubWin.location.href = url;
}
// --></script>
</head>
<body>
<a href="javascript:subWin()">サブウィンドウを開く</a><br>
<a href="javascript:setURL('http://www.yahoo.co.jp/')">Yahooのページをサブウィンドウに表示</a><br>
<a href="javascript:setURL('http://www.google.co.jp/')">Googleのページをサブウィンドウに表示</a><br>
</body>
</html>
指定したページを表示させるにはlocation.hrefに表示させたいページのURLを入れます。サブウィンドウに表示させるので
サブウィンドウ名.location.href = 表示させたいページのURL
と書きます。それでは次にサブウィンドウから親ウィンドウに指定したURLのページを表示させてみます。しかし、親ウィンドウにはサブウィンドウと違って名前がありません。ウィンドウそれ自身に表示させるなら
window.location.href = 表示させたいページのURL
となります。しかし、サブウィンドウで、これを実行するとサブウィンドウ自身にページが表示されてしまいます。JavaScriptでは親ウィンドウを操作する場合には特別にopenerというのものが用意されており以下のように指定します。
window.opener.location.href = 表示させたいページのURL
これ(window.opener)はウィンドウが開かれた親ウィンドウへの参照を意味します。このように指定すれば親ウィンドウが自由に操作できます。（ただし、異なるドメインの場合は操作できません）
以下が実際のプログラムになります。
■親ウィンドウ側のHTML
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function subWin()
{
window.open("sub4.html","sub","width=320,height=240");
}
// --></script>
</head>
<body>
<a href="javascript:subWin()">サブウィンドウを開く</a><br>
</body>
</html>
■サブウィンドウ側のHTML (sub4.html)
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setURL(url)
{
window.opener.location.href = url;
}
// --></script>
</head>
<body>
<a href="javascript:setURL('http://www.yahoo.co.jp/')">Yahooのページを親ウィンドウに表示</a><br>
<a href="javascript:setURL('http://www.google.co.jp/')">Googleのページを親ウィンドウに表示</a><br>
</body>
</html>
次回は画像について説明します。