【JavaScript】子ウィンドウ／親ウィンドウのお互いの要素を操作するには！？

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。

で、今度は親ウィンドウから子ウィンドウを開いて、子ウィンドウから親ウィンドウの要素を操作、子ウィンドウから親ウィンドウの要素を操作してみるという事をやってみたいと思います。

今回は、親ウィンドウから子ウィンドウを開いて、divで作ったボックスをクリックしたら拡大・縮小するアニメーションをお互いのウィンドウから操作する仕組みを説明します。
今回は、お互いのウィンドウからクリックしたらボックスが拡大するデモを作りました。＊いつものjs do itとかjs fiddleでは再現できないので、自分のサーバーで試します。

親ウィンドウのソース

主要な部分はJavaScriptなので、そこを載せておきます。

var sub_win;
var flag=true;

// サブウィンドウを開く処理
$("#btn").click(function(){
	
	sub_win=window.open($(this).attr("href"), "window_name", "width=300,height=500");
	return false;
});

//子ウィンドウの要素をアニメーションさせる処理
$("#btn-anime").click(function(){
	
	flag=!flag;
	
	var dom=sub_win.document.getElementById('box');
	
	if(flag){
		$(dom).stop().animate({
		width:300+"px",
		height:300+"px"
	},500);
	}else{
		$(dom).stop().animate({
		width:100+"px",
		height:100+"px"
	},500);
	}
	
});

子ウィンドウのオブジェクト

子ウィンドウを開くときにwindow.openで開きますが、その時に変数に子ウィンドウのオブジェクトを保持しておきます。

//子ウィンドウを保持する変数
var sub_win;

sub_win=window.open($(this).attr("href"), "window_name", "width=300,height=500");

documentオブジェクトからhtml要素を参照する

ウィンドウオブジェクトを変数に保持したら、windowオブジェクトの一部であるdocumentオブジェクトを通してhtml要素を参照することが可能になります。

JavaScriptにおいて、ブラウザにロードされたHTML文書はdocumentオブジェクトとして表される。documentオブジェクトは、文書に含まれるすべてのHTML要素へのアクセスを提供する。documentオブジェクトはWindowオブジェクトの一部であり、 window.document プロパティを通じてアクセスできる。

そこで、html要素を取得するためにおなじみのdocument.getElementByIdでIDがboxという要素にアクセスして変数に入れます。

あとは、jQueyなどでアニメーションさせたりしています。

//子ウィンドウのボックスの要素を変数に保持
var dom=sub_win.document.getElementById('box');

子ウィンドウのソース

子ウィンドウに書いたコードも基本的には同じです。

var flag=true;

$("#btn").click(function(){

	if(!window.opener || window.opener.closed){ // メインウィンドウの存在をチェック

		window.alert('メインウィンドウがありません'); // 存在しない場合は警告ダイアログを表示
		return false;
	}
	
	
	flag=!flag;
	var dom=window.opener.document.getElementById('box');

	if(flag){
		$(dom).stop().animate({
		width:300+"px",
		height:300+"px"
	},500);
	}else{
		$(dom).stop().animate({
		width:100+"px",
		height:100+"px"
	},500);
	}
});

親ウィンドウを参照するには？

子ウィンドウから親ウィンドウへの参照するには、window.openerで参照することができます。

親ウィンドウの存在を確認する

子ウィンドウから親ウィンドウを操作する時は、もしかしたら親ウィンドウが閉じられてる可能性もあるので、親ウィンドウの存在をチェックします。

そこで、if文でwindow.openerで親ウィンドウが存在しているか？もしくはwindow.opener.closedで親ウィンドウが閉じられているか？確認します。もし存在してなかったり、閉じられていたら警告ダイヤルを表示させて処理を中断してます。

if(!window.opener || window.opener.closed){ // メインウィンドウの存在をチェック
		window.alert('メインウィンドウがありません'); // 存在しない場合は警告ダイアログを表示
		return false; //以降の処理を中断
	}
	

documentオブジェクトからhtml要素を参照する

あとは、親ウィンドウの時と同じように、widnowオブジェクトの一部であるdocument.getElementByIdで親ウィンドウのIDがboxというhtml要素にアクセスしています。

//親ウィンドウのボックス要素を取得
var dom=window.opener.document.getElementById('box');
	

まとめ

他にも子ウィンドウから親ウィンドウを操作する方法があったりしますので、知りたい方は下記を参考にしてみてください。
他にも今回調べて参考にさせていただいたサイトもリンク貼っておきます。