出産前後の痔にはご注意!

JavaScriptを使ったセレクトボックスの表示先をインラインフレームにする方法を教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (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>

この回答への補足

<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/intr …
勉強しました。
ご教授いただいた
function jumpURL(target){
if(target != ""){
document.getElementsByTagName("iframe")[0].src = target;
}
}
で他のURLに変更して10件位試しましたら、エラーメッセージが出ません。
IBMのURLのみの問題ではないでしょうか?
この状態であれば使えそうなのですが。
すみませんが、エラーの分析を教えていただけませんか?
色々と有り難う御座います。本当に助かります。今後とも宜しく御願いします。ご迷惑でしょうが。

補足日時:2009/11/10 21:02
    • good
    • 0
この回答へのお礼

長らくの間色々とご教授有り難う御座いました。

部外者ですが
「検索中のページは現在、利用できません。....」
がでるのは、もしかしてソース内の特にURLの所に
&#8203;とか&...とか入ってませんか?
ここ教えてのぺーじでは、回等欄とか投稿欄の中身をコピペする時、
勝手にごみがつく事がよくあります。

と言うご忠告を頂き、すべてを手挿入で見直しましたところ、問題点がすべて解決いたしました。

yambejpさま、yyr446さま
良い勉強をさせて頂き有り難う御座いました。

お礼日時:2009/11/13 20:44

<<はずして確認しましたが同じく駄目でした。

>>
Home Pageビルダーの問題かも知れませんね。(よく知りませんが)
手打ちでNo3さんのサンプルのとおり作成したらIBMのURLでも
ちゃんと動作しますよ。
    • good
    • 0
この回答へのお礼

ご丁寧に有り難う御座いました。
色々と試してみます。

お礼日時:2009/11/13 17:18

部外者ですが


「検索中のページは現在、利用できません。....」
がでるのは、もしかしてソース内の特にURLの所に
&#8203;とか&...とか入ってませんか?
ここ教えてのぺーじでは、回等欄とか投稿欄の中身をコピペする時、
勝手にごみがつく事がよくあります。

それから、document.writeが微妙なのは、htmlのwriteとブラウザーが解釈するタイミングの問題があるからだと思います。
    • good
    • 0
この回答へのお礼

&#8203;とか&...とか入ってました。はずして確認しましたが同じく駄目でした。
document.writeが微妙なのは、⇒はなんとなくニュアンスが分かります。有り難う御座いました。

お礼日時:2009/11/11 16:06

であればこう?



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/

気にする必要はないのでしょうか!

お忙しいところ申し訳ありませんが、宜しく御願いします。

補足日時:2009/11/10 12:53
    • good
    • 0

たとえばこんな感じ



<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>

お手数をお掛けしますが宜しければ上記に基づき教えていただければ幸いです。

補足日時:2009/11/09 18:13
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング