フレームをまたいでフォームに入力されたデータを受け取る


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - × -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - × × -

ポイント document.myFORM.rData.value = parent.leftFrame.document.myFORM.data.value;
説  明 別フレームにあるフォームのテキストフィールドの内容を読み込むには「parent.フレーム名.document.フォーム名.エレメント名.value」のように指定します。ただし、フレームが同一ドメインでない場合にはセキュリティの都合により内容を読み込むことはできません。
サンプル <html> <head> <title>フレームをまたいでフォームに入力されたデータを受け取る</title> </head> <body> <form name="myFORM"> <input type="text" name="data"> </form> </body> </html>
補足説明 他フレームにデータを渡すにはいくつか方法がありますがセキュリティの都合で簡単にフレーム内のオブジェクトが操作しにくくなってきています。同一ドメイン内でないとデータの受け渡しはできません。 フレーム分割のページ等の内容は以下の通りです。 ●フレーム分割ページ <html> <head> <title>フレームをまたいでフォームに入力されたデータを受け取る</title> <frameset cols="20%,*"> <frame src="code_left.html" name="leftFrame"> <frame src="code_right.html"> </frameset> </head> </html> ●左側のページ(code_left.html) <html> <head> <title>フレームをまたいでフォームに入力されたデータを受け取る</title> </head> <body> <form name="myFORM"> <input type="text" name="data"> </form> </body> </html> ●右側のページ(code_right.html) <html> <head> <title>フレームをまたいでフォームに入力されたデータを受け取る</title> <script language="JavaScript"><!-- function getData() { document.myFORM.rData.value = parent.leftFrame.document.myFORM.data.value; } // --></script> </head> <body> <form name="myFORM"> 受け取ったデータ:<input type="text" name="rData"><br> <input type="button" value="受け取る" onClick="getData()"> </form> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA