javascriptでiframeのURL変更は?

このQ&Aのポイント
  • javascript初心者ですが、selectとradioから取得したnameに'.html'を足すことで、URLを形成することができました。
  • A,B,Cの選択をA_B_C.htmlという形にして表示することまではできたのですが、インラインフレームの中にそのURLを表示させたりURLの差し替えをすることができません。
  • 解決方法をご存知の方がいらっしゃいましたら、ご教授よろしくお願いいたします。
回答を見る
  • ベストアンサー

javascriptでiframeのURL変更は?

javascript初心者ですが、あれこれ悩みながらselect(仮にA)、radio(B)、radio(C)から取得したnameに".html"を足すことで、差し替えたいURLを形成することができました。 A,B,Cの選択を A_B_C.html という形にして それをwindow.open または locationで表示することまではできたのですが、インラインフレームの中にそのURLを表示させたりURLの差し替えをすることができません。 長い間悩みましたが解決できず困っています。 方法をご存知の方がいらっしゃいましたら、ご教授よろしくお願いいたします。 <script type="text/javascript"> <!-- //カラーの取得 function getRadio(colNo){ var col = ''; for(var i = 0; i < colNo.length; i++){ if (colNo[i].checked){ col = colNo[i].value; break; } } return col; } //柄の取得 function getGara(garaNo){ var gara = ''; for(var j = 0; j < garaNo.length; j++){ if (garaNo[j].checked){ gara = garaNo[j].value; break; } } return gara; } function show(url){ var size =document.fm.size.value; var col = document.fm.col; var gara = document.fm.gara; var src = "shohin/"; var url; var tourl = (src + size + "_" + getRadio(col) + "_" + getGara(gara)); var ifr = document.getElementById("s-box"); if(size==""||col==""||gara==""){ var url = (src+"annai.html"); } else{ var url = (tourl + ".html");} ifr.location = url; } //--> </script> -----------bodyの中-------- <form name="fm" <select name="size" <input type="radio" name="col" <input type="radio" name="gara" 中略 <iframe name="s-box" src=""></iframe> <input type="button" value="組合せを見る" onClick="show(url)" /></form>

noname#259973
noname#259973

質問者が選んだベストアンサー

  • ベストアンサー
  • q-ue
  • ベストアンサー率75% (12/16)
回答No.2

iframeのソースを変更するなら、 iframe.location=url; ではなく、 iframe.src=url; ですよ。

noname#259973
質問者

お礼

出ました! インラインフレームの中に指定のURLが・・長く苦戦していたので感動です ありがとうございました!

noname#259973
質問者

補足

iframeにボタンクリックでURL表示できました。ご回答に感謝します! 実際にはボタンアクションなしで選択条件に見合うURL表示を目指しています。 また試行錯誤して 質問させていただくかも知れません。 よろしくお願いします。 ヒントくださる方がいらしたら有難いです(汗)

その他の回答 (1)

  • 4017B
  • ベストアンサー率73% (1305/1776)
回答No.1

× <iframe name="s-box" src=""> ○ <iframe id="s-box" src=""> JavaScriptの getElementById() は「id名」でHTML要素を取得する関数。name属性は取れません。 どうしてもname属性を使う必要があるのなら、getElementsByName() の方を使ってください。その場合は取得したname属性要素は「リスト化(配列)」されて戻るので注意。

noname#259973
質問者

お礼

nameとidの間違いご指摘ありがとうございます。 補足のような状況でまだエラーですが まずは記載ミスを訂正しました。 教えていただいてありがとうございました。

noname#259973
質問者

補足

nameとIDの間違い、ご指摘ありがとうございます。 iframeをIDに訂正しました。 残念ながらインラインフレームに何も表示されずエラーになるのですが ifr.location = url; の部分が間違っているのでしょうか? location.href(url); なら、そのページがURL切り替わります。 window.open(url); なら、別windowでURL表示します。 URLの表示先をインラインフレームにすることができなくて困っています。 指定方法が間違いなのか プログラム自体の構成が悪いのかもしれません。 未熟な知識ですみません 教えてください

関連するQ&A

  • JavaScriptでの変数で数値を使った場合の疑問

    JavaScriptでの変数で数値を使った場合の疑問 <form action="sample.cgi" name="fm"> <button onclick="allInput()">全入力</button> <input size="10" type="text" name="hoge1" value=""> <input size="10" type="text" name="hoge2" value=""> <input size="10" type="text" name="hoge3" value=""> ・・・・ <input size="10" type="text" name="hoge30" value=""> </form> 上記のようなフォームがあったとします。 hoge1~hoge30まであるためにうけとる方法をforで受け取りたいのです。 <script Language="JavaScript"> function allInput() { for ( var i = 1; i <=30; i++ ) { document.fm.hoge+i.value = document.fm.hoge1.value; //上のiのところで1から30を文字列としたい } } </script> 内部的には document.fm.hoge2.value = document.fm.hoge1.value; document.fm.hoge3.value = document.fm.hoge1.value; document.fm.hoge4.value = document.fm.hoge1.value; ・・・ document.fm.hoge30.value = document.fm.hoge1.value; のようになっていきばいいのですが・・・ たとえになるかわかりませんが、Perlだと下のように$iの変数を文字列として扱えるのですが・・・ for ($i=1;$i <= 30; $i++){ ${"sample$i"} = param("hoge$i"); } よろしくお願いいたします。

  • javascriptによる動的なリンクの変更

    javascriptによって、ラジオボタンをチェックする度に(チェックを変える度に) 動的にリンクを変更したいのですが、上手くいきません。 すみませんが、どなたか教えていただけないでしょうか? ちなみに、下記は私が試したコードです。(全く動きませんが。) ラジオボタンのチェックを変えると、<a>タグのhrefの中身のURLが、そのボタンのvalueに対応して変わるようにしたいのですが。。 <FORM NAME="sample"> 選択して下さい -->  <input type="radio" name="list" OnChange="UpdateLink()" value="http://www.yahoo.co.jp" />s <input type="radio" name="list" OnChange="UpdateLink()" value="http://www.vector.co.jp/authors/VA011407/" />m <input type="radio" name="list" OnChange="UpdateLink()" value="mailto:akirayu@a2.mbn.or.jp" />l <A href="samplelink">リンク更新!!</A> </FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- var pos; for(var i=0; i < document.links.length; i++) { if (document.links[i].href.indexOf("samplelink") != -1) pos = i; } function UpdateLink() { checked = document.sample.list.checked Index; document.links[pos].href = document.sample.list[checked ].value; } //--> </SCRIPT>

  • javascriptについて

    <script type="text/javascript"> <!-- function df(){ var scr=100; if(document.ad.y.checked){ var sty=document.ad.a; for(var i=0;i<3;i++){ if(sty[i].checked){ scr+=20+10*i; break; } } } document.ad.ad1.value=scr; } --> </script> </head> <body> <form action="#" method="POST" name="ad"> <h4>毎日歯を磨きますか?</h4> <p><input type="checkbox" name="y" value="">はい<br> <input type="checkbox" name="n" value="">いいえ</p> <h4>何回</h4> <p>1回<input type="radio" name="a" value=""><br> 2回<input type="radio" name="a" value=""><br> 3回<input type="radio" name="a" value=""></p> <p>何<input type="text" size="20" name="ad1">点</p> <p><input type="button" value="配点" onClick="df()">&nbsp;<input type="reset" value="リセット"></p> </form> </body> </html> プログラムとしては成功しているんですが 解らないところが for(var i=0;i<3;i++) のところです。ラジオボタンに添え字を使って計算をしているという プログラムなのでしょうが たとえばlengthではなくあえて数字を入れてるのは 配列ではないからでしょうか? もう一点 formをつかって button やimage などを使うと 間違いを指摘してもデーターが流れて言ってしまいます。 return falseなど工夫はしてますが データーをtextに入っている文面を消さずに修正させるいい方法はありませんか お願いします。

  • IMGタグのsrcを同時に変更することができない

    radioボタンを押すと画像をそれぞれ切り替えるものを作りたく、試してみたのですが思うように動きません。最後のiB.children[i].src = vvv[j] + ".jpg";が1つのIMGタグに対してしか効いていないせいのようです。複数のIMGタグのsrcも同時に変更していきたいのですがどのようにしたら良いのでしょうか。 <html xml:lang="ja" lang="ja"> <head> <title>radioボタンを押して3×3パターンの画像を切り替える</title> <script type="text/javascript"> function imgChange(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT") return; var inp = t.parentNode.getElementsByTagName("input"); var nnn = [], vvv = []; for(i=0; node=inp[i++];){ if(node.type == "radio" && node.checked) { nnn.push(node.name); vvv.push(node.value); } } var iB = document.getElementById('imgBOX'); var iBlen = iB.children.length; for(i=0; iBlen>i; i++){ //処理前のalert alert("before : src = "+iB.children[i].src); //IMGタグのsrc通りの結果に。 if(iB.children[i].tagName != "IMG") continue; for(j=0, node=nnn[j]; inp.length>j; j++){ if(iB.children[i].name == node){ iB.children[i].src = vvv[j] + ".jpg"; } break; } //処理後のalert alert("after : src = "+iB.children[i].src); //一番最初のIMGだけが変更され、残りは変更されず。 } } </script> </head> <body> <form action="#" onclick="imgChange(event);"> 画像Aの切替⇒ <input type="radio" name="imgA" value="3" checked /> <input type="radio" name="imgA" value="4" /> <input type="radio" name="imgA" value="5" /> <br /> 画像Bの切替⇒ <input type="radio" name="imfB" value="6" checked /> <input type="radio" name="imfB" value="7" /> <input type="radio" name="imfB" value="8" /> <input type="radio" name="imfB" value="9" /> <input type="radio" name="imfB" value="10" /> <br /> 画像Cの切替⇒ <input type="radio" name="imgC" value="11" checked /> <input type="radio" name="imgC" value="12" /> </form> <p>----------------------------------</p> <div id="imgBOX"> 画像Aは<img width="20" src="0.jpg" name="imgA" alt="画像A" /> <br /> 画像Bは<img width="20" src="1.jpg" name="imfB" alt="画像B" /> <br /> 画像Cは<img width="20" src="2.jpg" name="imgC" alt="画像C" /> </div> </body> </html>

  • javascriptでラジオボタンをチェックさせて、それによってリンク

    javascriptでラジオボタンをチェックさせて、それによってリンクを飛ばしたいと考えています。 自分なりに調べて、作成したのですが、 フレームを利用しており、ページ全体を移動(top)したいのですが、フレーム内でしか表示されません。 <HTML> <HEAD> <TITLE>らじお</TITLE> <SCRIPT LANGUAGE="JavaScript"> function jump(){ var flag = 0; for(i=0; i<document.forms[0].url.length; i++){ if(document.forms[0].url[i].checked){ flag = 1; window.location.href = document.forms[0].url[i].value; } } if(flag == 0){ alert('ラジオボタンが選択されていません。'); } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="radio" NAME="url" VALUE="表示したいURL.htm" checked>選択肢1<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいURL.htm">選択肢2<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいURL.htm">選択肢3ド<br> <INPUT TYPE="button" onClick="jump();" VALUE="移動"> </FORM> </BODY> </HTML> 上記状態で、あちらこちらに"_top"を挿入してみたのですが、うまくいきません。 どなたかお知恵を拝借出来ませんでしょうか?

  • javascriptについて

    function df(){ document.ad.ad1.value=500; } function df2(a){ var sty=a.ad2.selectedIndex; a.ad3.value=eval(a.ad1.value)*eval(a.ad2.options[sty].value); } function df3(){ var s1=document.ad.ad3.value; var s2=document.ad.ad4.value; var fv=s1+"円\n"+ s2+"様"; var don=confirm(fv); } function df4(){ var p=0; if(document.ad.ad4.value==""){ p=1; } if(p){ alert("記入漏れ"); return false; } else{ return true; } } --> </script> </head> <body> <form action="#" method="POST" name="ad"> <p>ラーメン<input type="text" soze="20" value="500" name="ad1" onChange="df()">円</p> <p><select name="ad2" onChange="df2(this.form)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> 個 </select> </p> <p>合計<input type="text" size="20" name="ad3">円</p> <p>備考:<input type="text" size="20" name="ad4"></p> <p><button onClick="df3();df4();"><img src="rtp/migi.jpg"></button></p> </form> </body> </html> 内容に間違いがあっても データーを送ってしまいます。 何故なんでしょうか?

  • javascriptからURLパラメータ値を送る

    使用言語はJSPです。 画面上のラジオボタンの値を取得しているjavascriptが以下です。 これでボタンが押下されたとき、この関数を呼び出しラジオボタンのVALUE値をアラートとして表示することはできています。 これをURLパラメータとして、JSPサーバ側に送りたいと思いますが、 NULL値となってしまいます。 取得は、request.getParameter("aaa"); としていますがNULL値です。 JAVASCRIPTからURLパラメータを送付・サーバ側から取得する方法を教えていただけますか。 function check(){ var aaa = document.getElementsByName("ラジオボタンの名前"); for(var i=0;i<arr.length;i++){ if(aaa[i].checked) var param = aaa[i].value; aaa.action = "./bbb.jsp?param="+param; aaa.submit(); return aaa[i].value; } }

  • VBSからjavascript

    下記ソースの指定の箇所からjavascriptのfunction fun1(1)をよびたいのですがどう記述したらいいでしょうか。 (ちなみにbody onload=は使わない条件です) <%@ LANGUAGE = VBSCRIPT %> <html> <head> <script type="text/javascript"> <!-- //禁止、許可 function fun1(is){ var is; var i; var jj; jj=document.form1.text2.length; for (i=0;i<jj;i++){ if (is==1) document.form1.text2[i].disabled=true; if (is==2) document.form1.text2[i].disabled=false; } } //--> </script> </head> <html> <body> <form name="form1"> <input type="text" name="text2" size="14" maxlength="8" value="ABC"> <input type="text" name="text2" size="14" maxlength="8" value="DEF"> <% <-------------------ここでfun1(1)をよびたい fun(1)と書いてもエラー >% </form> </body> </html>

  • javascript

    ある文字を入力して、文字を返すロジックですが、 ボックスを作成して入力を行いたいです。 以下のロジックだと、hogeのvalueに文字を入力すると、文字はボックスに返されますが、 valueをスペースにして、value="" htmlで画面上で、文字を入力して、submitを実行しても、文字は返されません。 文字が引き渡されたないのが原因だと思われますが、 submitでどのようにして文字を引き渡してよいか、教えて頂けないでしょうか。 宜しくお願いします。 <form id="sample"> <input type="text" id="hoge" name="hoge" value="pass" size="30"> <input type="text" id="foo" name="foo" value="" size="100"> <INPUT type="submit" value="変換"> <script language="javascript"> (function () { function test(p){var 省略 charAt(i);}return s;} var elements = document.getElementById('sample').elements; elements['foo'].value = test(elements['hoge'].value); }()); </script>

  • 複数のラジオボタンのチェック

    複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか? 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0~4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------

専門家に質問してみよう