JavaScriptでウィンドウ間のやりとり

ウィンドウ間のやりとり

JavaScriptではwindow.openメソッドでウィンドウを開くことができ、このメソッドの返り値がウィンドウオブジェクトとなる。 第1変数に開くURL、第2変数にウィンドウの名前、第3変数にウィンドウのプロパティを指定する。プロパティはコンマで区切って複数指定できる。 また、ウィンドウの変数等を操作することもできる。

次のコードは新しいウィンドウを開き、それを操作するものである。変数popupopenメソッドの返り値を代入する。 適当な要素 (windowOpener) をクリックした場合にポップアップウィンドウ開くようにする (ポップアップウィンドウが開かれている場合はポップアップウィンドウにフォーカスする) 。 オプションは幅と高さを300pxとし (width=300,height=300) 、ツールバーを非表示とする (toolbar=no) 。 "popup==null||popup.closed"はポップアップが開かれていない場合にtrueとなる。 フォームの送信ボタンをクリックすると、ポップアップウィンドウのテキスト入力欄の内容を親ウィンドウのテキスト入力欄の内容に変更する。

var popup=null;

document.getElementById('windowOpener').addEventListener('click',function(){
	if(popup==null||popup.closed){
		popup=window.open('popup.html','popup','width=300,height=300,toolbar=no');
	}else{
		popup.focus();
	}
});
	
document.getElementById('button').addEventListener('click',function(){
	if(popup!=null&&!(popup.closed)){
		popup.window.document.getElementById('text').value=document.getElementById('text').value;
	}
});

次のコードはポップアップウィンドウが読み込むコードである。適当な要素をクリックするとポップアップウィンドウは閉じられる。window.openerでポップアップの親ウィンドウを参照できる。 フォームの送信ボタンをクリックすると、親ウィンドウのテキスト入力欄の内容がポップアップウィンドウのテキスト入力欄の内容になる。

document.getElementById('windowCloser').addEventListener('click',function(){
	window.close();
});

document.getElementById('button').addEventListener('click',function(){
	window.opener.document.getElementById('text').value=document.getElementById('text').value;
});
ウィンドウを開く