マンガでよめる痔のこと・薬のこと

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>

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

A 回答 (2件)

iframeのソースを変更するなら、


iframe.location=url;
ではなく、
iframe.src=url;
ですよ。

この回答への補足

iframeにボタンクリックでURL表示できました。ご回答に感謝します!

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

補足日時:2012/10/07 19:03
    • good
    • 1
この回答へのお礼

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

お礼日時:2012/10/07 19:03

× <iframe name="s-box" src="">



○ <iframe id="s-box" src="">

JavaScriptの getElementById() は「id名」でHTML要素を取得する関数。name属性は取れません。

どうしてもname属性を使う必要があるのなら、getElementsByName() の方を使ってください。その場合は取得したname属性要素は「リスト化(配列)」されて戻るので注意。

この回答への補足

nameとIDの間違い、ご指摘ありがとうございます。
iframeをIDに訂正しました。
残念ながらインラインフレームに何も表示されずエラーになるのですが
ifr.location = url;
の部分が間違っているのでしょうか?

location.href(url); なら、そのページがURL切り替わります。
window.open(url); なら、別windowでURL表示します。

URLの表示先をインラインフレームにすることができなくて困っています。
指定方法が間違いなのか プログラム自体の構成が悪いのかもしれません。
未熟な知識ですみません 教えてください

補足日時:2012/10/06 08:30
    • good
    • 0
この回答へのお礼

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

お礼日時:2012/10/06 08:30

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

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q【JQuery】iframeのリンク先変更、jquery_dump

JQueryの勉強を始めたのですが、うまくいきません。2点ご質問させていただきます。もしわかる方がいらっしゃれば教えてください。

1.下記のように、javascriptで動的にiframeのリンク先を変更したいのですが、エラーが出て処理が成功しません。
 javascript(jquery?)ではiframeのリンク先を変更することはできないのでしょうか。
 (また、jqueryオブジェクトについての詳細なメソッドや使用方法など がのっているサイトなどあれば教えていただきたいです。)

 ///////javascript//////////
<script type="text/javascript" src="shared/js/jquery.js"> 
function test(url)
 {
  // urlにはhttp://yahoo.co.jpなど、urlが入る
  $("#ifr").set("src",url);
 }
</script>

 ///////html//////////
 <iframe id="ifr" src="" height=768 width=512>
 </iframe>
2.jquery_dumpというphpのvar_dumpのような便利な関数があるようなのですが、私がサイトからダウンロードしたものには入っていませんでした(not definedが出ます)。これは、プラグインなどJQuery本体と別のものを導入する必要があるのでしょうか。

JQueryの勉強を始めたのですが、うまくいきません。2点ご質問させていただきます。もしわかる方がいらっしゃれば教えてください。

1.下記のように、javascriptで動的にiframeのリンク先を変更したいのですが、エラーが出て処理が成功しません。
 javascript(jquery?)ではiframeのリンク先を変更することはできないのでしょうか。
 (また、jqueryオブジェクトについての詳細なメソッドや使用方法など がのっているサイトなどあれば教えていただきたいです。)

 ///////javascript//////////
<scri...続きを読む

Aベストアンサー

setというメソッドは知りませんが、attrで設定すれば動作するようです。
$("#ifr").attr("src",url);
参考URL
http://www.mikage.to/jquery/
http://www.openspc2.org/JavaScript/Ajax/ref/jQuery/index.html

jquery_dumpについてはライブラリの一つだと思うのですが、ちょっとわからないです。
参考URLの前者(リファレンスのページ)で使っているようなので、そのページのソースから解析できるのではないかと思います。

QIFRAME内のURLを取得したです。

IFRAMEのURLにhttp://www.goo.ne.jpなどのアドレスを設定した場合、URLの取得ってできますか?
IFRAMEの中でページ移動されてもそのときのアドレスを取得したいのですが、これは可能ですか?

よろしくお願いします。

Aベストアンサー

<IFRAME id="test" name="test" src="http://www.goo.ne.jp"></IFRAME>
とかの時
document.getElementById("test").src
でsrcに設定されているアドレスは取得できます。
また
test.location.href
の様にして移動したときのアドレスも取得できますが
IFRAMEを表示しているサイトと別のサイトを表示している場合には、
アクセス違反となり取得できません。
なので、質問文でのように自サイトのIFRAMEでwww.goo.ne.jpを表示しているような場合、そのアドレスを取得することはできません

QJavaScriptでiframeの内容を「空ページ」にする方法

JavaScriptでiframeの内容を「空ページ」にする方法

動作環境はWinXP IE8です。
iframeでsrcに何も指定しないでhtmlを開くと、真っ白な状態で開きます。
プロパティを見ると「about:blank」となっています。

一旦他のページを開いたあとに、クリアボタン押下時に
この状態にしたいのですが、どうもうまくいきません。

とりあえず、普通にURLを指定するときと同じ感覚で
document.getElementById("…").src = "about:blank";
と書いてみたのですがうまくいきません。

document.getElementById("…").src = "";
でも同じです。

iframeの中身を空にする方法はないのでしょうか?
出来るのかできないのか、もしできるのならその方法を教えてください。
よろしくお願いします。

Aベストアンサー

うーん。再現できませんね、IE8で試してるんですけど
↓とどこが違います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
<!--
function fuga(){
document.getElementById("hoge").src = "about:blank";
}
// -->
</script>
</head>
<body>
<div><button onclick="fuga();" type="button">clear</button></div>
<iframe src="http://oshiete.goo.ne.jp/qa/6283562.html" id="hoge"></iframe>
</body>
</html>

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qdiv内に外部のurlを表示させたい

たびたびお世話になります。

divにスクロールを表示することで、iframeのようにブラウジングすることができますが、
このdiv内に外部のurlを表示させることは可能でしょうか?
検索してみたのですが、思うようなものが見つからず困っています。
それとも、不可能なのでしょうか?

もし可能なのであれば、その方法等簡単に記述していただければ幸いです。

Aベストアンサー

iframeの代用はobjectを使うのが定石のようです。

こんな感じでしょうか?
<body>
<div>
<object type="text/html" data="http://www.yahoo.co.jp/" width="600" height="300">
<p>object に対応していない場合はこれが表示される</p>
</object>
</div>
</body>

ただ、Objectタグには制限が多く使いづらい部分もあります。
※たとえば、枠の非表示などができない
CGIやPHP、JavaScriptを介す方法を考えた方が、場合によってはいいかもしれません。

とりあえず、一つの回答ということで…。

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

Qiframe内のformをサブミットする方法について

標題の件について、いろいろ試しているのですが、iframe内のフォームをサブミットできません。わかる方いましたら教えていただけないでしょうか。以下に試しているソースを記述します。宜しくお願い致します。

○ボタン押下時、ifrのform1をサブミットさせる。

<body>
<iframe name="ifr" id="ifr" style="display:none">
<form id="form1" name="form1" id="form1" method="post" action="http://192.168...">
</form>
</iframe>
<input type="button" onclick="parent.ifr.form1.submit; " value="送信"/>
</body>

Aベストアンサー

こんにちは

???
この記述だと<iframe>内には何も入っていないですよ?
やるのであればこんな感じ?

<script language="javascript"><!--
window.onload=function() {
ifr.document.open();
ifr.document.write("<html><body>");
ifr.document.write("<form id='form1' name='form1' id='form1' method='post' action='http://192.168...' target='_top'>");
ifr.document.write("</form>");
ifr.document.write("</body></html>");
ifr.document.close();
}
//--></script>


<iframe name="ifr" id="ifr" style="display:none"></iframe>
<input type="button" onclick="parent.ifr.form1.submit(); " value="送信"/>

こんにちは

???
この記述だと<iframe>内には何も入っていないですよ?
やるのであればこんな感じ?

<script language="javascript"><!--
window.onload=function() {
ifr.document.open();
ifr.document.write("<html><body>");
ifr.document.write("<form id='form1' name='form1' id='form1' method='post' action='http://192.168...' target='_top'>");
ifr.document.write("</form>");
ifr.document.write("</body></html>");
ifr.document.close();
}
//--></script>


<iframe name...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング