読者です 読者をやめる 読者になる 読者になる

サーバー構築メモ

サーバーを構築したりWEBサイトを作ったりした際の個人的な備忘録です

Javascript 子ウィンドウからwindow.openerを使って親ウィンドウを操作する

window.openで開いた子ウィンドウからwindow.openerプロパティを使って親ウィンドウのテキストボックスに値を設定する

「親ウィンドウ部分」

<html>
<head><title>親ウィンドウ</title></head>
<body>

<input type="button" value="子ウィンドウを開く" onClick="window.open('sub.html','sub','width=640,height=480');return false;">

<div id="title01"></div>
<form action="send.cgi" method="post" name="form01">
<input type="text" name="text01" value="" readonly="readonly">
</form>

</body>
</html>

「子ウィンドウ部分」

<html>
<head>
<title>子ウィンドウ</title>
<script language="text/javascript">
<!--
function setFormInput(val){
  if(!window.opener || window.opener.closed){
    //親ウィンドウが存在しない
    window.close();
  } else{
    //window.openerで親ウィンドウのオブジェクトを操作
    window.opener.document.getElementById('title01').innerHTML = val;
    window.opener.document.form01.text01.value = val;
    window.close();
  }
}
// -->
</script>
</head>
<body>
好きな果物を選んで下さい。
<a href="javascript:setFormInput('いちご');">いちご</a><br>
<a href="javascript:setFormInput('りんご');">りんご</a><br>
<a href="javascript:setFormInput('みかん');">みかん</a><br>
<input type="button" value="子ウィンドウを閉じる" onClick="window.close();return false;">
</body>
</html>

サンプルはこちら。