- ベストアンサー
【プルダウンメニュー】フレームの中のインラインフレームに、ターゲットを指定するには？
現状は【フレームA（ヘッダー1）】【フレームB（ヘッダー2）】【フレームC（メイン）】【フレームD（フッター）】の4分割のうえに、更にフレームCの中に【インラインフレーム】があります。 フレーム3の中にプルダウンメニューを設置し、インラインフレームに表示させたいのですが上手く動作しません。 ※ちなみに、「var target = "フレームA名";」で試してみると動作はするのですが…。 という事は「フレームの中のインラインフレーム」という点がネックなのでしょうか？ とあるソースを改良して使おうと思ったのですが、javascript素人につき行き詰まっています。どなたか回答いただけると嬉しいです。 <SCRIPT TYPE="text/javascript"> <!-- var target = "インラインフレーム名"; function jump(){ var url = document.form1.select.options[document.form1.select.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </SCRIPT> <FORM NAME="form1"> <SELECT NAME="select" onChange="jump()"> <option value="">お選びください <option value="Ahtml/arr">AAA <option value="B.html">BBB <option value="C.html">CCC <option value="D.html">DDD <option value="E.html">EEE </SELECT> </FORM>
- roly
- お礼率78% (11/14)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
- - arrival.html - - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.arr.location.href = url; } </script> </head> <body> <iframe name="arr"></iframe> <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">お選びください <option value="aaa.html">AAA <option value="bbb.html">BBB </SELECT> </FORM> </body> </html>
その他の回答 (2)
- - arrival.html - - parent.arr.location.href = url;
補足
【arrival.html】だけを表示し、動作確認をするときちんと動作するのですが、【index.html】で表示した状態（arrival.htmlがフレーム3「frame name="top"」に表示されている状態）で、動作確認をすると動きません。 ★現状のHPの構成は、下のyambejpさまへの補足説明を参考にして頂ければと思います。 なお、今はこんな状況です。↓ <SCRIPT TYPE="text/javascript"> function jump(obj){ var url = obj.value; if (url!="") parent.frames["top"].document.getElementById('iframex').src=url; parent.arr.location.href = url; } <FORM NAME="form1"> <SELECT NAME="select" onChange="jump()"> <option value="">お選びください <option value="aaa.html">AAA <option value="bbb.html">BBB </SELECT> </FORM> 初心者につき、基本的な事も余りよく分かっておりません。ご指導願います。
- yambejp
- ベストアンサー率51% (3827/7415)
こういうことですか？ //main.htm <frameset rows="10%,10%,*"> <frameset cols="50%,*"> <frame name="head1" src="1.htm"> <frame name="head2" src="2.htm"> </frameset> <frame name="body" src="3.htm"> <frame name="foot" src="4.htm"> </framset> //3.htm <SCRIPT TYPE="text/javascript"> function jump(obj){ var url = obj.value; if (url!="") parent.frames["foot"].document.getElementById('iframex').src=url; } </SCRIPT> <FORM NAME="form1"> <SELECT NAME="select" onChange="jump(this)"> <option value="">お選びください <option value="5.htm">5 <option value="6.htm">6 </SELECT> </FORM> //4.htm <iframe id="iframex" src="5.htm"></iframe>
補足
アドバイスありがとうございます。 ただ、当方が素人の所為か、上手く動作しません。 現状がどういう状況になっているか、もう少し詳しく説明致しますので、再度アドバイスいただければ幸いです。 【1】 まずトップページが4フレームに分かれています。 フレーム1（タイトル）左上 フレーム2（メニュー）右上 フレーム3（メインページ frame nameは"top"）中央 フレーム4（フッター）下 メニューで選択すると、各内容がメインページに表示するに設定しています（targetをtopに指定しています）。 【2】 メニューで「新着情報」を選択すると、新着情報ページarrival.htmlがメインページに表示されます。 【3】 その新着情報ページarrival.htmlの中に、インラインフレーム「name=arr」があります。 【4】 今回はその新着情報ページarrival.htmlの中に、ポップアップメニューを設置し、その結果を同じくarrival.html内のインラインフレーム内に表示させたいのですが…！ 説明が下手ですみません。よろしくお願いします。
お礼
無事に動作しました。ありがとうございました。長い間悩んでいたものが、こんなに早く解決できるとは…！感激です。 素人同然の私の質問に、丹念に回答を頂きました事、心より感謝致します。