セレクトメニューで同時に2つのフレームを入れ替える


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

ポイント <frameset rows="40,*"> <frame src="top.html" name="fTop"> <frameset cols="50%,*"> <frame src="left.html" name="fLeft"> <frame src="right.html" name="fRight"> </frameset> </frameset> jpURL = new Array("left.html" ,"right.html", "left2.html","right2.html", "left3.html","right3.html"); function popJump(selOBJ) { n = selOBJ.selectedIndex; parent.fLeft.location.href = jpURL[n*2 ]; parent.fRight.location.href = jpURL[n*2+1]; } <select onChange="popJump(this)">
説  明 セレクトメニューで同時に2つのフレームを入れ替えるには、あらかじめ入れ替えるフレームにname属性で名前を付けておきます。名前を付けたフレームのURLは「parent.フレーム名.location.href」で指定することができます。
サンプル <html> <head> <title></title> <frameset rows="40,*"> <frame src="top.html" name="fTop"> <frameset cols="50%,*"> <frame src="left.html" name="fLeft"> <frame src="right.html" name="fRight"> </frameset> </frameset> </head> </html>
補足説明 同時に複数のフレームを入れ替える場合、必ずしもJavaScriptでなければできないわけではありません。HTMLでもフレームを2つに分割し、さらにその1つのフレーム内にフレーム分割するHTMLを読み込めばJavaScriptを使わなくても同時に複数のフレームをハイパーリンク(aタグ)だけで処理することができます。
 また、top.htmlの内容は以下の通りです。 <html> <head> <title></title> <script Language="JavaScript"><!-- jpURL = new Array("left.html" ,"right.html", "left2.html","right2.html", "left3.html","right3.html"); function popJump(selOBJ) { n = selOBJ.selectedIndex; parent.fLeft.location.href = jpURL[n*2 ]; parent.fRight.location.href = jpURL[n*2+1]; } // --></script> </head> <body> <form> <select onChange="popJump(this)"> <option>left.html, right.html <option>left2.html, right2.html <option>left3.html, right3.html </select> </form> </body> </html>

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

写真素材 PIXTA