クリックしたら同時に2つのフレームを入れ替える


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

ポイント parent.topPage.location.href = jpURL1; parent.bottomPage.location.href = jpURL2;
説  明 2つのフレームを同時に変更するには変更したいフレームの数だけ「parent.location.フレーム名.href」に表示するページURLを指定します。2つであれば、これらを列記します。フレーム名はframeタグのname属性で指定したものになります。
サンプル <html> <head> <title>クリックしたら同時に2つのフレームを入れ替える</title> <frameset cols="20%,*"> <frame src="code_left.html"> <frameset rows="50%,*"> <frame src="code_top.html" name="topPage"> <frame src="code_bottom.html" name="bottomPage"> </frameset> </frameset> </head> </html>
補足説明 フレーム分割のページ等の内容は以下の通りです。 ●フレーム分割ページ <html> <head> <title>クリックしたら同時に2つのフレームを入れ替える</title> <frameset cols="20%,*"> <frame src="code_left.html"> <frameset rows="50%,*"> <frame src="code_top.html" name="topPage"> <frame src="code_bottom.html" name="bottomPage"> </frameset> </frameset> </head> </html> ●左側のページ(code_left.html) <html> <head> <title>クリックしたら同時に2つのフレームを入れ替える</title> <script language="JavaScript"><!-- function set2Frame(jpURL1,jpURL2) { parent.topPage.location.href = jpURL1; parent.bottomPage.location.href = jpURL2; } // --></script> </head> <body> <a href="javaScript:set2Frame('page1.html','page2.html')">ページ1,2</a><br> <a href="javaScript:set2Frame('page3.html','page4.html')">ページ3,4</a><br> </body> </html>

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

写真素材 PIXTA