左側のフレームにフォームのデータを渡し自分自身もURLを変更する


動作ブラウザ 【 IE:2.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 - - - - - - - - - - × × -

ポイント txt = document.rFORM.myTEXT.value; parent.leftFrame.document.myFORM.myTEXT.value = txt; location.href = "next.html";
説  明 右側のフレームから左側のフレームにデータを渡すには左側のフレームに名前をつけておき「parent.leftFrame.document.フォーム名.エレメント名.value」にデータを書き込みます。次に自分自身のページURLを変更するためlocation.hrefに表示したいページURLを指定します。
サンプル <html> <head> <title>左側のフレームにフォームのデータを渡し自分自身もURLを変更する</title> <frameset cols="50%,*"> <frame src="left.html" name="leftFrame"> <frame src="right.html" name="rightFrame"> </frameset> </head> </html>
補足説明 左側、右側フレームのHTMLファイル内容は以下の通りです。 ●左側のフレーム <html> <head> <title>左側のフレームにフォームのデータを渡し自分自身もURLを変更する</title> </head> <body>  左側のフレームです。<br><br> <form name="myFORM"> <input type="text" name="myTEXT"> </form> </body> </html> ●右側のフレーム <html> <head> <title>左側のフレームにフォームのデータを渡し自分自身もURLを変更する</title> <script language="JavaScript"><!-- function sendToFrame() { txt = document.rFORM.myTEXT.value; parent.leftFrame.document.myFORM.myTEXT.value = txt; location.href = "next.html"; } // --></script> </head> <body onScroll="scrl()">  右側のフレームです。<br><br> <form name="rFORM"> <input type="text" name="myTEXT" value="Sample"><br> <input type="button" value="データを渡す" onClick="sendToFrame()"> </form> </body> </html>

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

写真素材 PIXTA