hakeの日記

Windows環境でプログラミングの勉強をしています。

javascript 子ウィンドウとのデータのやりとり

program javascript

子ウィンドウとデータのやり取りを行う方法２つ。

  • showModal(Modeless)Dialogを使用する方法（IEのみで動作？）
    • 親→子：showModalDialogの第二引数を使用する。
    • 子→親：変数returnValueを使用する。
    • 子ウィンドウを右上×で閉じた場合にはreturnValueはundefinedになる。
  • window.openを使用する方法
    • 子ウィンドウから親ウィンドウへ、this.opener.document.getElementById()でアクセスできる。
    • 子ウィンドウから親ウィンドウへ、this.opener.window.変数名でアクセスできる。
    • IEでは子ウィンドウを開くごとにスクリプト実行許可の問い合わせが表示される。

main.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>子ウィンドウとのデータやり取り</title>
<script type="text/javascript">

	var obj = {opt1 : 1, opt2 : 'foo'};

	// showModalDialogを使用
	function open_window1(){
		var ret = 'no data';
		ret = showModalDialog('05_child1.html',this,'dialogWidth:480px,dialogHeight:120px');
//		ret = showModalDialog('05_child1.html',this.document.getElementById('result1').innerText
//									,'dialogWidth:480px,dialogHeight:120px');
		document.getElementById('result1').innerText = ret;
	}

	// window.openを使用
	function open_window2(){
		window.open('05_child2.html','sub','width:480,height:120');
	}
</script>
</head>
<body>
	<button onclick='open_window1()'>開く(showModalDialog)</button><br>
	子ウィンドウの文字列：<span id='result1'>何か入力してください。</span><br>
	<br>
	<button onclick='open_window2()'>開く(window.open)</button><br>
	子ウィンドウの文字列：<span id='result2'>何か入力してください。</span><br>


</body>
</html>

child1.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>子ウィンドウ(showModalDialog)</title>
<script type="text/javascript">
	function close_window(){
		var ret;
		returnValue = document.getElementById('txt').value;
		this.close();
	}

	window.onload=function(){
		var opener = window.dialogArguments;
		var v = opener.document.getElementById('result1').innerText;
//		var v = window.dialogArguments;

		document.getElementById('txt').value  = v;
	}
</script>
</head>
<body>
	<input type='text' id='txt' style='width:320px;'>
	<button onclick='close_window()'>閉じる</button><br>

</body>
</html>

child2.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>子ウィンドウ(window.open)</title>
<script type="text/javascript">
	function close_window(){
		var ret;
		ret = document.getElementById('txt').value;
		this.opener.document.getElementById('result2').innerText = ret;
		this.close();
	}

	window.onload=function(){
		var v = this.opener.document.getElementById('result2').innerText;
		document.getElementById('txt').value  = v;
		v = this.opener.window;
		document.getElementById('obj1').value  = v.obj.opt1;
		document.getElementById('obj2').value  = v.obj.opt2;

	}
</script>
</head>
<body>
	<input type='text' id='txt' style='width:320px;'><br>
	<input type='text' id='obj1' readonly style='width:320px;'><br>
	<input type='text' id='obj2' readonly style='width:320px;'><br>
	<button onclick='close_window()'>閉じる</button><br>

</body>
</html>