29、ページ間のデータ伝達

ページをフレームで分割したり、別ウインドウで表示したりする場合に データや命令を共有したシステムが作りたい場合がある。
その場合は<FORM>に値をセットしておくと、別フレームや、ウインドウから取り出して使うことが出来ます。


1、フォームの書式と値のセット

<FORM>の書き方はHTMLをご存知の方は承知されていると思いますが、おさらいの意味で書いておきますと。

<form name="フォームの名前">
<input type="text" value="初期値" name="入力窓の名前">
<input type="button" value="表示文字" name="ボタンの名前" onClick="クリック時の処理()">
</form>

のようになります。
名前は英数字で自由につけてください。
入力窓の初期値は、通常空白「 value="" 」をセットしておきます。

この入力窓に値をセットするには

document.フォームの名前.入力窓の名前.value = 置き場;

と書きます。
逆に、置き場に取りこむ場合は


置き場 = document.フォームの名前.入力窓の名前.value;


です。

2、フレーム間伝達

これは同じページ内での書き方ですので、別のフレームやウインドウからは参照できません。

フレーム間で参照するには「parent.フレーム名.」を頭につけます。

値をセットするには

parent.フレーム名.document.フォームの名前.入力窓の名前.value = 置き場;

置き場に取りこむには

置き場 = parent.フレーム名.document.フォームの名前.入力窓の名前.value;

具体的には次のデモのようになります。


フレーム

3、浮動フレーム

ページ内に窓を開ける、浮動フレームの場合は。

親から浮動フレームを見る場合は

フレーム名.document.フォームの名前.入力窓の名前.value = 置き場;
置き場 = フレーム名.document.フォームの名前.入力窓の名前.value;

浮動フレームから親ページを見る場合は

parent.document.フォームの名前.入力窓の名前.value = 置き場;
置き場 = parent.document.フォームの名前.入力窓の名前.value;

となります。

具体的には次のデモのようになります。



入力窓

浮動フレーム



4、別ウインドウ

window.openを使って別ウインドウを開いた場合は。

親から別ウインドウを見る場合は

ウインドウ名.document.フォームの名前.入力窓の名前.value = 置き場;
置き場 = ウインドウ名.document.フォームの名前.入力窓の名前.value;

別ウインドウから親ページを見る場合は

opener.document.フォームの名前.入力窓の名前.value = 置き場;
置き場 = opener.document.フォームの名前.入力窓の名前.value;

となります。

具体的には次のデモのようになります。



入力窓








5、隠れて渡す

デモは、入力窓が見えるようになっていましたが、隠しても機能には影響ありません。
隠す場合は

<input type="text" value="初期値" name="入力窓の名前">

<input type="hidden" value="初期値" name="入力窓の名前">

と書く以外は何も変わりません。


ソースを以下に表示しますので、説明と見比べながら、勉強してください。

デモのソース
フレーム


<html> <head><title></title></head> <frameset cols="70%,*"> <frame src="hidari.htm" name="hidari_frame"> <frame src="migi.htm" name="migi_frame"> </frameset> </html>
左ページ


<html> <head> <title></title> <script language="javascript"> <!-- //右へ送る function migi_hidari(){ dt=document.hidari_form.hidari_mado.value; parent.migi_frame.document.migi_form.migi_mado.value=dt; } //右から取りこむ function hidari_migi(){ dt=parent.migi_frame.document.migi_form.migi_mado.value; document.hidari_form.hidari_mado.value=dt; } //消去 function cls(){ document.hidari_form.hidari_mado.value=""; } //--> </script> </head> <body> <center> <form name="hidari_form"> 左入力窓<br> <input type=text name="hidari_mado" value="情報伝達テスト1"><br> <input type=button value="→" onClick="migi_hidari()"> <input type=button value="消去" onClick="cls()"> <input type=button value="←" onClick="hidari_migi()"> </form> </center> </body> </html>
右ページ


<html> <head> <title>j</title> <script language="javascript"> <!-- //左に送る function migi_hidari(){ dt=document.migi_form.migi_mado.value; parent.hidari_frame.document.hidari_form.hidari_mado.value=dt; } //左から取りこむ function hidari_migi(){ dt=parent.hidari_frame.document.hidari_form.hidari_mado.value; document.migi_form.migi_mado.value=dt; } //消去 function cls(){ document.migi_form.migi_mado.value=""; } //--> </script> </head> <body> <center> <form name="migi_form"> 右入力窓<br> <input type=text name="migi_mado"><br> <input type=button value="→" onClick="hidari_migi()"> <input type=button value="消去" onClick="cls()"> <input type=button value="←" onClick="migi_hidari()"> </form> </center> </body> </html>

浮動フレーム親ページ


<html> <head> <title>j</title> <script language="javascript"> <!-- //浮動フレームへ送る function oya_ko(){ dt=document.oya_form.oya_mado.value; ko_frame.document.ko_form.ko_mado.value=dt; } //浮動フレームから取りこむ function ko_oya(){ dt=ko_frame.document.ko_form.ko_mado.value; document.oya_form.oya_mado.value=dt; } //消去 function oya_cls(){ document.oya_form.oya_mado.value=""; } //--> </script> </head> <body> <form name="oya_form"> 入力窓<br> <input type=text name="oya_mado" value="情報伝達テスト2"><br> <input type=button value="↓" onClick="oya_ko()"> <input type=button value="消去" onClick="oya_cls()"> <input type=button value="↑" onClick="ko_oya()"> </form> <iframe src="nyumon292.htm" name="ko_frame" width=300 height=80></iframe> </body> </heml>
浮動フレーム子ページ


<html> <head> <title></title> <script language="javascript"> <!-- //親へ送る function ko_oya(){ dt=document.ko_form.ko_mado.value; parent.document.oya_form.oya_mado.value=dt; } //親から取りこむ function oya_ko(){ dt=parent.document.oya_form.oya_mado.value; document.ko_form.ko_mado.value=dt; } //消去 function cls(){ document.ko_form.ko_mado.value=""; } //--> </script> </head> <body> <center> <form name="ko_form"> <input type=button value="↓" onClick="oya_ko()"> <input type=button value="消去" onClick="cls()"> <input type=button value="↑" onClick="ko_oya()"><br> <input type=text name="ko_mado" value=""><br> 浮動フレーム </form> </center> </body> </html>

ウィンドウ親ページ


<html> <head> <title></title> <script language="javascript"> <!-- // scr_h=screen.height; scr_w=screen.width; win_flg=0; function win_open(){ win_flg=1; new_win=window.open("nyumon293.htm"); } function win_close(){ win_flg=0; new_win.close(); } //ウインドウへ送る function bas_win(){ if(win_flg==0){win_open();} dt=document.bas_form.bas_mado.value; new_win.document.win_form.win_mado.value=dt; new_win.focus(); } //ウインドウから取りこむ function win_bas(){ if(win_flg==0){win_open();} new_win.focus(); dt=new_win.document.win_form.win_mado.value; document.bas_form.bas_mado.value=dt; } //消去 function bas_cls(){ document.bas_form.bas_mado.value=""; } //--> </script> </head> <body> <center> <form name="bas_form"> <br>入力窓<br> <input type=text name="bas_mado" value="情報伝達テスト3"><br> <input type=button value="↓" onClick="bas_win()"> <input type=button value="消去" onClick="bas_cls()"> <input type=button value="↑" onClick="win_bas()"> <br><br> <input type=button value="新ウィンドウを開く" onClick="win_open()"><br> <input type=button value="ウィンドウを閉じる" onClick="win_close()"><br><br> </form> </center> </body> </html>
新しいウィンドウページ


<html> <head> <title></title> <script language="javascript"> <!-- //親へ送る function win_bas(){ dt=document.win_form.win_mado.value; opener.document.bas_form.bas_mado.value=dt; } //親から取りこむ function bas_win(){ dt=opener.document.bas_form.bas_mado.value; document.win_form.win_mado.value=dt; } //消去 function win_cls(){ document.win_form.win_mado.value=""; } //--> </script> </head> <body onLoad="focus()"> <center> <form name="win_form"> <input type=button value="↓" onClick="bas_win()"> <input type=button value="消去" onClick="win_cls()"> <input type=button value="↑" onClick="win_bas()"><br> <input type=text name="win_mado" value=""><br> 新しいウインドウ入力窓<br> </form> </center> </body> </html>