- ベストアンサー
javascriptを使った値受渡（アイフレーム）
- javascriptを使って、診断テストを作成するために、値を受け渡す方法について質問です。
- iframeを使用してファイルを呼び出すため、URLは変わらず、中のiframeのみが変わっていく状況です。
- CookieやURLのパラメータを使用して値を受け渡すことはできるのでしょうか？
- potwell331
- お礼率47% (20/42)
- JavaScript
- 回答数9
- ありがとう数0
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
#3です。 document.writeで書きまくるなら、直接ソースに記しておくほうが見やすいし、メンテも楽かと。 （ループで作成するならまた別ですが） HTMLソースを読み込み中のdocument.writeと、その後とでは動作が若干変わりますので、このあたりは理解なさっておいた方がよろしいかと思います。（検索すれば見つかると思います） #4様が「先に読み込んでおく」場合の基本的な方法の一例を示してくださっているのではないでしょうか。 ＞エラーが出ます。 標準準拠のスクリプトで記されているのが主な理由でしょう。 ご自分で自作するにしても、ブラウザによる実装の違いには対処しなければならないので、いずれにしろ、そのあたりも理解しておく必要がでてきます。 jqueryなどのライブラリを利用するることで、実装の違いに悩まされることが少なくなるかも知れません。
その他の回答 (8)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.6補足 ぶっちゃけ、「俺が全部作るから、それをコピペしろ」と言いたくなるような内容なんですが(´д｀ ) そういうスタイルで回答しているわけではないので。 実行される順番とか、タイミングとかを勉強してみてください。 あと、forループとか、innerHTMLですかね。
- babu_baboo
- ベストアンサー率51% (268/525)
あ～だめだ。さらに。 document.write ('<style>#Q>fieldset { display: none; } </style>'); を、 document.write ('<style>#Q>fieldset { display: none; } <'+'/style>'); に、
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.2補足 ではそのできなかったコードを提示してみてください。 できない原因がわかるかもしれません。 ・cookie、URLパラメータ、PHPセッションの保存の仕方がわからない ・cookie、URLパラメータ、PHPセッションの取り出し方がわからない ・cookie、URLパラメータ、PHPセッションに何を保存したらいいかがわからない １つめ、２つめが原因なら、解説サイトのサンプルなどを見て勉強してください。 ３つめなら、『解』を言えば「選択肢番号」や「ポイント」です。 こういうページ遷移型の設問アプリって、作るのは意外と面倒なんですけどね ┐(´д｀ )┌ 親フレームを使うならご参考まで。 http://okwave.jp/qa/q7430522.html
補足
今はいろいろ試行錯誤してこんなコードになっています。 でも、ｍのところがローカル変数？なので、次の問題に進めません。 クリックしたら次の質問に進んでいきたいのですが。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="success.css" media="screen,print" /> <title>サンプル</title> </head> <body> <div id="fb-root"></div> <script><!-- //変数を定義 var i = 0; counts = ""; m = 0; function ts1() { counts = counts + 1; m = 1; } function ts2() { counts = counts + 2; m = 1; } function ts3() { counts = counts + 3; m = 1; } function ts4() { counts = counts + 1; m = 2; } function ts5() { counts = counts + 2; m = 2; } function ts6() { counts = counts + 3; m = 2; } function ts7() { counts = counts + 1; m = 3; } function ts8() { counts = counts + 2; m = 3; } function ts9() { counts = counts + 3; m = 3; } question = new Array("質問","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); answer1 = new Array("選択１","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); answer2 = new Array("選択２","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); answer3 = new Array("選択３","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); if(i == 0 && m == 0 ){ document.write("<center>"); document.write("<div id='main_contentsbox'>"); document.write("<h1><img src='images/titile.gif' alt='診断'></h1>"); document.write("<div id='contents_bak'>"); document.write("<h2>"+(i+1)+"<span>/全７問中</span></h2>"); document.write("<div class='text_catch'>"+question[i]+"</div>"); document.write("<ul>"); document.write("<li id='list1'><a href='' onclick='ts1()' >"+answer1[i]+"</a></li>"); document.write("<li id='list2'><a href='' onclick='ts2()' >"+answer2[i]+"</a></li>"); document.write("<li id='list3'><a href='' onclick='ts3()' >"+answer3[i]+"</a></li>"); document.write("</ul>"); document.write("</div>"); document.write("</div>"); document.write("</center>"); var i = 1; } if(i == 1 && m == 1 ){ document.write("<center>"); document.write("<div id='main_contentsbox'>"); document.write("<h1><img src='images/titile.gif' alt='診断'></h1>"); document.write("<div id='contents_bak'>"); document.write("<h2>"+(i+1)+"<span>/全７問中</span></h2>"); document.write("<div class='text_catch'>"+question[i]+"</div>"); document.write("<ul>"); document.write("<li id='list1'><a href='' onclick='ts4()' >"+answer1[i]+"</a></li>"); document.write("<li id='list2'><a href='' onclick='ts5()' >"+answer2[i]+"</a></li>"); document.write("<li id='list3'><a href='' onclick='ts6()' >"+answer3[i]+"</a></li>"); document.write("</ul>"); document.write("</div>"); document.write("</div>"); document.write("</center>"); var i = 2; } if(i == 2 && m == 2){ document.write("<center>"); document.write("<div id='main_contentsbox'>"); document.write("<h1><img src='images/titile.gif' alt='診断'></h1>"); document.write("<div id='contents_bak'>"); document.write("<h2>"+(i+1)+"<span>/全７問中</span></h2>"); document.write("<div class='text_catch'>"+question[i]+"</div>"); document.write("<ul>"); document.write("<li id='list1'><a href='' onclick='ts7()' >"+answer1[i]+"</a></li>"); document.write("<li id='list2'><a href='' onclick='ts8()' >"+answer2[i]+"</a></li>"); document.write("<li id='list3'><a href='' onclick='ts9()' >"+answer3[i]+"</a></li>"); document.write("</ul>"); document.write("</div>"); document.write("</div>"); document.write("</center>"); var i = 3; } //--></script> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
あ～やっぱり・・・、ていせい。 var A = document.querySelectorAll ('#Q > fieldset'); と、 かく せつもんの「前の質問に戻る」の、href="#Q1"は、ひとつまえの ばんごうにしてください。 と、 ぜんかくくうはくは、はんかくにしてね。
- babu_baboo
- ベストアンサー率51% (268/525)
ねぼけながら かいてみました。なので・・・ querySelectorAll とか、Array#map とか、Array#reduce とか つかってます。 ふぃあ～ふぉっくすで、ためしてね。 <!DOCTYPE html> <title>TEST</title> <script> document.write ('<style>#Q>fieldset { display: none; } </style>'); </script> <body> <form action="#" id="Q" onsubmit="return false"> <fieldset id="Q1"> <legend>Q1</legend> <p>中国は好きですか?</p> <label><input type="radio" name="q1" value="1">好き</label> <label><input type="radio" name="q1" value="2" checked="checked">どちらでもない</label> <label><input type="radio" name="q1" value="3">嫌い</label> </fieldset> <fieldset id="Q2"> <legend>Q2</legend> <p>韓国は好きですか?</p> <label><input type="radio" name="q2" value="1">好き</label> <label><input type="radio" name="q2" value="2" checked="checked">どちらでもない</label> <label><input type="radio" name="q2" value="3">嫌い</label> <p><a href="#Q1">前の質問に戻る</a></p> </fieldset> <fieldset id="Q3"> <legend>Q3</legend> <p>台湾は好きですか?</p> <label><input type="radio" name="q3" value="3">好き</label> <label><input type="radio" name="q3" value="2" checked="checked">どちらでもない</label> <label><input type="radio" name="q3" value="1">嫌い</label> <p><a href="#Q1">前の質問に戻る</a></p> </fieldset> </form> <script> var A = document.forms['Q'].querySelectorAll ('fieldset'); var B = (function (f) { var fieldset = Array.prototype.slice.call (f, 0); return function (element, direction) { var index = fieldset.indexOf (element) + direction; if ((0 <= index) && (index < fieldset.length)) { element.style.display = 'none'; fieldset[index].style.display = 'block'; return true; } return false; } })(A); var C = function (event) { var element = event.target; var thisFieldset; if (element) { switch (element.tagName) { case 'A' : if (/^#Q\d$/.test (element.getAttribute ('href'))) if (thisFieldset = D (element, 'tagName', 'FIELDSET')) B (thisFieldset, -1); break; case 'INPUT' : if ('radio' === element.type) if (/^q\d$/.test (element.name)) if (thisFieldset = D (element, 'tagName', 'FIELDSET')) if (! B (thisFieldset, 1)) E (); break; } } }; var D = function (element, type, val) { return (element) ? (val == element[type]) ? element : D (element.parentNode, type, val) : null; }; var E = function () { var radio = A[0].form.querySelectorAll ('input[type="radio"][name^="q"]:checked'); var ary = Array.prototype.map.call (radio, function (r) { return Number (r.value); }); var point = ary.reduce (function (a, b) { return a + b; }); alert ('value=' + ary + ' / point=' + point); }; A[0].style.display = 'block'; document.addEventListener ('click', C, false); </script>
- fujillin
- ベストアンサー率61% (1594/2576)
私も最初に考えたのは「親ページ」ですが、自由にならいみたいなので… 全体像が不明なのでよくわからないけれど、各ページがシークエンスなのか、自由に行ききできるのかで受け渡すデータも違ってきそうな気がします。 前者なら、合計値だけを渡して行くだけでもよさそうなのでＵＲＩのパラメータでも良いし、後者だと設問毎の値を保持しておく必要がありそうなのでクッキーの方が良さそう。 ＵＲＩで渡すなら、次のページのスクリプトでlocation.searchとかlocation.hashで受け取れるかと思います。 クッキーに関しては、「javascript cookie」あたりをキーに検索すれば、保存・読み出しの方法はわかるかと思います。 しかし、設問数がそれほどの数ではないように思えるので、いちいち別のページにしなくても、まとめて読み込んでしまったほうが遷移の時間が掛からないでよいのではと思います。 そうすることで、「ページ間の受け渡し」というそもそものご質問も必要なくなっちゃいますし… 設問の表示を順に行うとか、自由に順番を変えるとかなども、該当部分を表示（他は非表示）とするといった制御で比較的簡単に実現できると思います。 設問等はHTMLに記載しておいても良いし、（理由はわかりませんが）ご提示のものではデータにしているようなので、設問数分のデータにしておいてもよろしいかと。 また、データだけ外部スクリプト化しておけば、メンテナンスも楽になるかもしれません。
補足
すみません。 一度にページをよんだ方がいいということで、 以下のようにページを変更してみました。 コンテンツの設問数は全部で７個で、countsの数で ７つの設問が全て終わったところで診断結果を表示させたいと思っています。 for文で質問文をセットして選択肢をクリックするごとに、 質問文、選択肢が変わっていくような動作にしたいのですが、 クリックをしても、配列の中身が変わっていってくれません。 どのようにしたらひとつづつ順番に質問文と選択肢を表示することが出来るのでしょうか、、 本当に初心者ですみません。 ご教授いただけましたら幸いです。 -------------------- //変数を定義 var i = 0; counts = ""; m = 0; //配列に質問をセットする question = new Array("テキスト","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); answer1 = new Array("選択肢１","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); answer2 = new Array("選択肢２","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); answer3 = new Array("選択肢３","sssss","sssss1","sssss4","sssss5","sssss6","sssss7"); for ( var i = 0; i <= 7; i++) { if(i == m){ function ts1() { counts = counts + 1; m = m + 1; } function ts2() { counts = counts + 2; m = m + 1; } function ts3() { counts = counts + 3; m = m + 1; } document.write("<center>"); document.write("<div id='main_contentsbox'>"); document.write("<h1><img src='images/titile.gif' alt='タイトル'></h1>"); document.write("<div id='contents_bak'>"); document.write("<h2>"+(i+1)+"<span>/全７問中</span></h2>"); document.write("<div class='text_catch'>"+question[i]+"</div>"); document.write("<ul>"); document.write("<li id='list1'><a href='' onclick='ts1()' >"+answer1[i]+"</a></li>"); document.write("<li id='list2'><a href='' onclick='ts2()' >"+answer2[i]+"</a></li>"); document.write("<li id='list3'><a href='' onclick='ts3()' >"+answer3[i]+"</a></li>"); document.write("</ul>"); document.write("</div>"); document.write("</div>"); document.write("</center>"); } }
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>いろいろ調べたところ、Cookieを使ったり、 >URLにパラメーターを渡して値を受け渡せばいいのかなーと >思っているのですが、 悩む前にやってみたらどうですか？ できないことが確認できてから悩んでも遅くはないと思いますが。
補足
すみません、実際にいろいろ試しているのですが、 なかなかうまくいかないのでここで質問させてもらいました。。
- askaaska
- ベストアンサー率35% (1455/4149)
iframeで切り替えているなら 親ページで点数を保持してはどお？
補足
facebookのアプリを作っているので、親ページはfacebookの開発ページ？みたいなもので、 私が簡単に編集したりすることが出来ないのです。。 ＰＨＰで作成していたときはセッションを使って http://oshiete.goo.ne.jp/qa/7423848.html こんな風に作ったのですが、 本番で使おうとしているサーバーではＰＨＰが使えなかったので、 javascriptで作りなおしているところなんです。。
補足
ありがとうございます。 クロム、firefoxではきちんと動くのですが、 ＩＥだと var fieldset = Array.prototype.slice.call(f, 0);のところで Jscriptオブジェクトを指定してください とエラーが出ます。 どうしたらいいのでしょうか、、 コードまで書いていただいてすみません。。