子ウインドのデータを取得2

更新日 2008-03-09 (日) 17:11:29

子ウインドで入力した値の取得サンプル

window.showModalDialogを使用するときはGoogle Map APIが子ウインドとして利用するときヘッダーの関係で子ウインドでMAPが表示しないのでwindow.openを使用する方法を示す

idを利用の例

親ウインドのid="lat"で示された場所に子ウインドwindow.opener.document.getElementById("lat").valueが入る。このidでお互いの場所を関係づける。
この場合はTextBox以外にidが設定できる要素であればすべてOKなようです。

親ウインド

<html>
<body>

データ  <BR>
緯度:<INPUT TYPE="TEXT" SIZE="40" id="lat" name="map_latitude"><br>
経度:<INPUT TYPE="TEXT" SIZE="40" id="lng" name="map_longitude"><br>

<!-- Textbox以外も文字列の中にも入る -->
緯度:
<p id="lat">未定</p>

<script type="text/JavaScript">
<!--
function winOpen(theURL,winName,features) { //v2.0
 window.open(theURL,winName,features);
}
//-->
</script>

<!--ボタン表示 -->
 <INPUT TYPE="button" VALUE="入力" ONCLICK="winOpen \
('input3.php','newWindow','scrollbars=yes width=850,height=750' )">
<BR>
<!--リンク表示 -->
<p><a href="#" onclick="winOpen('input3.php','newWindow','scrollbars=yes \
width=850,height=750' )">新しいウインドウを開く!</a></p>
</html>

子ウインド(input3.php)

<html>
<head>
<script type="text/javascript">
function change(){
 window.opener.document.getElementById("lat").value=document.f.lat.value;
 window.opener.document.getElementById("lng").value=document.f.lng.value;
 window.close();
}
</script>
</head>

<body>
   緯度:<INPUT TYPE ="TEXT" NAME ="lat" SIZE = "25" style="ime-mode:disabled;">&nbsp;&nbsp;
   経度:<INPUT TYPE ="TEXT" NAME ="lng" SIZE = "25" style="ime-mode:disabled;"><BR>

<p><input type="button" value="OK" onclick="change();">
<input type="button" value="キャンセル" onclick="window.close();"></p>

</body>
</html>

FormのNameを利用する

親ウインドのFormに<Form Name = "f">のように名前をつけてそこにデータを渡す

子ウインド(input3.php)

<html>
<head>
<script type="text/javascript">
function change(){
 window.opener.document.f.lat.value=document.f.lat.value;
 window.opener.document.f.lng.value=document.f.lng.value;
 window.close();
}
</script>
</head>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-03-09 (日) 17:11:29 (3632d)