- ベストアンサー
JavaScriptを使ったセレクトボックスの表示先
JavaScriptを使ったセレクトボックスの表示先をインラインフレームにする方法を教えてください。
- houshi725
- お礼率88% (15/17)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
document.writeは微妙ですね・・・ DOMっぽくいきませんか？ <script> function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } }; try{ window.addEventListener("load",function(){createForm();},false); }catch(e){ window.attachEvent("onload",function(){createForm()}); }; function createForm(){ var f=document.createElement("form"); var s=document.createElement("select"); s.setAttribute("name","select"); try{ s.addEventListener("change",function(){jumpURL(this.value)},false); }catch(e){ s.attachEvent("onchange",function(){jumpURL(s.value)}); }; var options=[ {"value":"","text":"セレクトボックス"} ,{"value":"http://www.yahoo.co.jp","text":"リンク1"} ,{"value":"http://www.google.co.jp","text":"リンク2"} ,{"value":"http://www.goo.ne.jp","text":"リンク3"} ]; for(var i in options){ var o=document.createElement("option"); o.setAttribute("value",options[i].value); o.appendChild(document.createTextNode(options[i].text)); s.appendChild(o); }; f.appendChild(s); document.getElementById("hoge").appendChild(f); } </script> <div id="hoge"></div> <iframe></iframe>
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
＜＜はずして確認しましたが同じく駄目でした。＞＞ Home Pageビルダーの問題かも知れませんね。（よく知りませんが） 手打ちでNo3さんのサンプルのとおり作成したらIBMのURLでも ちゃんと動作しますよ。
お礼
ご丁寧に有り難う御座いました。 色々と試してみます。
- yyr446
- ベストアンサー率65% (870/1330)
部外者ですが 「検索中のページは現在、利用できません。．．．．」 がでるのは、もしかしてソース内の特にURLの所に ＆＃8203；とか＆...とか入ってませんか？ ここ教えてのぺーじでは、回等欄とか投稿欄の中身をコピペする時、 勝手にごみがつく事がよくあります。 それから、document.writeが微妙なのは、htmlのwriteとブラウザーが解釈するタイミングの問題があるからだと思います。
お礼
＆＃8203；とか＆...とか入ってました。はずして確認しましたが同じく駄目でした。 document.writeが微妙なのは、⇒はなんとなくニュアンスが分かります。有り難う御座いました。
- yambejp
- ベストアンサー率51% (3827/7415)
であればこう？ function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } }
補足
<!-- function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } } document.write('<FORM>') document.write('<SELECT NAME="select" onChange="jumpURL(this.options[this.selectedIndex].value)">') document.write('<OPTION VALUE="">セレクトボックス'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク1'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク2'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク3'); document.write('</SELECT></FORM>') //--> 上記のように挿入しました。 お陰様でインラインフレームに表示されましたが、下記のスクリプトエラーメッセージが出ます ライン:3 文字:142 エラー:'}'がありません。 コード:0 URL:http://www-06.ibm.com/software/jp/internet/hpb/ 気にする必要はないのでしょうか！ お忙しいところ申し訳ありませんが、宜しく御願いします。
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばこんな感じ <select onchange="if(this.value!=''){document.getElementById('hoge').src=this.value}"> <option value="">選択する</option> <option value="http://www.yahoo.co.jp">yahoo</option> <option value="http://www.google.co.jp">google</option> </select> <iframe id="hoge"> </iframe>
補足
回答有り難う御座います。情報不足ですみませんでした。 Home Pageビルダー11です。下記のセレクトボックスとインラインフレームを取り込んでいます。 <body> <script language="JavaScript"> <!-- function jumpURL(target){ if(target != ""){ location.href = target } } document.write('<FORM>') document.write('<SELECT NAME="select" onChange="jumpURL(this.options[this.selectedIndex].value)">') document.write('<OPTION VALUE="">セレクトボックス'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク1'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク2'); document.write('<OPTION VALUE="http://www-6.ibm.com/jp/software/internet/hpb/">リンク3'); document.write('</SELECT></FORM>') //--> </script> <iframe frameborder="1" width="200" height="300" scrolling="AUTO" name="1"></iframe> </body> お手数をお掛けしますが宜しければ上記に基づき教えていただければ幸いです。
お礼
長らくの間色々とご教授有り難う御座いました。 部外者ですが 「検索中のページは現在、利用できません。．．．．」 がでるのは、もしかしてソース内の特にURLの所に ＆＃8203；とか＆...とか入ってませんか？ ここ教えてのぺーじでは、回等欄とか投稿欄の中身をコピペする時、 勝手にごみがつく事がよくあります。 と言うご忠告を頂き、すべてを手挿入で見直しましたところ、問題点がすべて解決いたしました。 yambejpさま、yyr446さま 良い勉強をさせて頂き有り難う御座いました。
補足
<body> <script> function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } }; try{ window.addEventListener("load",function(){createForm();},false); }catch(e){ window.attachEvent("onload",function(){createForm()}); }; function createForm(){ var f=document.createElement("form"); var s=document.createElement("select"); s.setAttribute("name","select"); try{ s.addEventListener("change",function(){jumpURL(this.value)},false); }catch(e){ s.attachEvent("onchange",function(){jumpURL(s.value)}); }; var options=[ {"value":"","text":"セレクトボックス"} ,{"value":"http://www.yahoo.co.jp","text":"リンク1"} ,{"value":"http://www.google.co.jp","text":"リンク2"} ,{"value":"http://www.goo.ne.jp","text":"リンク3"} ]; for(var i in options){ var o=document.createElement("option"); o.setAttribute("value",options[i].value); o.appendChild(document.createTextNode(options[i].text)); s.appendChild(o); }; f.appendChild(s); document.getElementById("hoge").appendChild(f); } </script> <div id="hoge"></div> <iframe></iframe> </body> </html> ページを表示できません。 検索中のページは現在、利用できません。Web サイトに技術的な問題が発生しているか、ブラウザの設定を調整する必要があります。 とエラーが出ます。 プログラミング知識は全く持ち合わせていませんので、笑わないでご指導下さい。 <div id="hoge"></div> <iframe></iframe>はこのまま埋め込んで良いのですか。 DOMっぽくいきませんか？⇒意味が分からなくて http://www.doraneko.org/misc/dom10/19981001/introduction.html 勉強しました。 ご教授いただいた function jumpURL(target){ if(target != ""){ document.getElementsByTagName("iframe")[0].src = target; } } で他のURLに変更して10件位試しましたら、エラーメッセージが出ません。 IBMのURLのみの問題ではないでしょうか？ この状態であれば使えそうなのですが。 すみませんが、エラーの分析を教えていただけませんか？ 色々と有り難う御座います。本当に助かります。今後とも宜しく御願いします。ご迷惑でしょうが。