- ベストアンサー
フレームのランダム選択方法
ご質問させていただきます。 例えば、上下2分割になっていて、上のフレームがメニュー用のフレーム、 下のフレームが更に4分割だとして、メニュー（例えばBBS）をクリックすると、 下フレームのどれかに、クリックするたびに画面が表示されるようにしたいと思っています。 何かよい方法はございませんでしょうか？ おわかりになるようでしたら、ご回答お願いいたします。
- seiji_a
- お礼率48% (23/47)
- JavaScript
- 回答数10
- ありがとう数4
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
もしかしたらlocation.hrefでこけているのかも知れません。 まず、何処でエラーになっているのかを調べてください。 適当なところでalert()を入れてみて何処て落ちているのか確認してください。 <script language="javascript"> <!-- function test(page_url,kp_num){ var rdm,i; alert("0"); do{ rdm = Math.floor(Math.random() * 4); for(i=0;i < kp_num.length;i++) if(kp_num[i] == rdm) break; }while(i < kp_num.length) alert("1"); switch(rdm){ case 0: ： ： } alert("2"); return rdm; } ↑このような感じで。 また、 top.a.location.href = page_url; をコメントにして変わりにalert()を出すなどしてみて下さい。 // top.a.location.href = page_url; alert("url1"); それと、今更ですが、プログラムを見やすくする為に左端に全角スペースを入れていますが、全角スペースは削除してください。 alert("url1"); ^^^^^^ ↑「^」この部分のことです。 もし、location.hrefでこけているようでしたら <BODY> ～ </BODY>のどこかに <form>タグを追加して、submit();で遷移するというのはどうでしょう？ // top.a.location.href = page_url; document.form名.target = "a"; document.form名.action = page_url; document.form名.submit(); このような感じになります。
その他の回答 (9)
- sorarisp
- ベストアンサー率58% (7/12)
すみません。勘違いをしていたようです。 MacにIE5.5は存在しないようですね。。。 確認したわけではありませんが。。 IEで動作しないのはどうも別の理由があるようです。 現在お使いのIEのバージョン等を教えていただけますか? それと、インターネットセキュリティのJavascriptが有効になっているのかを確認してみてください。
補足
sorarispさま 昨日から、↑に対してレス書いているのですが、何故かここで反映されません・・・。 環境ですが、MacのIE5.0です。 そして、インターネットセキュリティのjavascriptは有効になっております。 どうぞよろしくお願いいたします。
- sorarisp
- ベストアンサー率58% (7/12)
rdm = Math.floor(Math.random() * 4); の変わりに var now_time = new Date().getMilliseconds(); rdm = now_time % 4; で乱数を取得するという事です。 <script language="javascript"> <!-- function test(page_url,kp_num){ var now_time; var rdm,i; do{ now_time = new Date().getMilliseconds(); rdm = now_time % 4; for(i=0;i < kp_num.length;i++) if(kp_num[i] == rdm) break; }while(i < kp_num.length) switch(rdm){ case 0: top.a.location.href = page_url; break; case 1: top.b.location.href = page_url; break; case 2: top.c.location.href = page_url; break; case 3: top.d.location.href = page_url; break; } return rdm; }
補足
sorarispさま 何度もどうもありがとうございます。 早速、↑をコピペしてブラウザ動かしてみました。 winのIE、ネスケは何も問題は無く、Macのネスケが、ランダムになる時とならない時がある（これは無視するとして）、問題のMacのIEでは、前回同様動きませんでした・・・。 もう、これ以上の方法はありませんでしょうか？？ これ以上の回避方法あるようでしたら、ご回答お願いいたします。
- sorarisp
- ベストアンサー率58% (7/12)
MacのIE5.5ですと、Mathオブジェクトが対応していないようです。 下記のURL参照 http://www.openspc2.org/JavaScript/ref2/math/math/ 対応策としまして、時間から乱数を取得するのはどうでしょう。 var now_time = new Date().getMilliseconds(); rdm = now_time % 4; このような感じです。 レスポンスは多少悪くなりますが、体感はないはずです。
補足
sorarispさま 何からなにまですみませんです・・・。 >MacのIE5.5ですと、Mathオブジェクトが対応していないようです。 なるほど、そうなのですか・・・。 同じIEなのだから同じ動きしてくれれば本当に良いのに・・・。 所で、↑の乱数の取得という事で、 下記のような感じで宜しいのでしょうか？ とはいえ、単に、一番上に追記しただけなのですが・・・。 （ファイル名などは、今私が使おうとしているものです。） <script language="javascript"> <!-- function test(page_url,kp_num){ var now_time = new Date().getMilliseconds(); rdm = now_time % 4; var rdm,i; do{ rdm = Math.floor(Math.random() * 4); for(i=0;i < kp_num.length;i++) if(kp_num[i] == rdm) break; }while(i < kp_num.length) switch(rdm){ case 0: top.a.location.href = page_url; break; case 1: top.b.location.href = page_url; break; case 2: top.c.location.href = page_url; break; case 3: top.d.location.href = page_url; break; } return rdm; } function test2(){ var kp_num = new Array(3); var i; for(i=0;i < 3;i++) kp_num[i] = -1; kp_num[0] = test('e.html',kp_num); kp_num[1] = test('f.html',kp_num); kp_num[2] = test('g.html',kp_num); test('h.html',kp_num); return 0; } //--> </script> 本当に申し訳ございませが、上記で違うようでしたら、 ご回答、度々ですがよろしくお願いいたします。
- sorarisp
- ベストアンサー率58% (7/12)
>また、page_C.htmlの後の<br>は必要なのでしょうか？ ああ、、すみません。<br>は起動テストしたときの名残です。 消し忘れていました。別に必要はありません。 >page_Cが配列要素の中に入ってないのは何故でしょうか？ それは、最後のページでどのフレームが選択されても別に困らないだろうと思って省きました。 別にその後kp_num配列を参照する事もないので。。。 ですが、ソースを見やすくする為に kp_num[2] = test('page_C.html',kp_num); としてもいいと思います。 その場合は var kp_num = new Array(3); とするのを忘れないようにしてください。 >上フレームのメニューの部分も、0と言う数字が表示されてページが入れ替わってしまいます。 これは確証はないのですが、 <a href="javascript:test2()"> としているのではないでしょうか？ この場合ですと、自ページでも画面遷移する為、0が表示され(何故？)てページが入れ替わる為だと思います。 対策として <a href="javascript:test2()" onClick="javascript:return test2()"> として、test2()で常に戻り値をfalseにすれば良いと思います。 これは、onCkickイベントでfalseを返す事により、ページ遷移処理をキャンセルしています。 これでだめでしたら、 <a href="javascript:void(0);" onClick="javascript:return test2()" onKeyPress="javascript:return test2()"> でも良いはずです。
補足
度々、本当にありがとうございます。 丁度、今、下のほうへ別の書き込みをしたのですが、 書き込み終わった後に、↑のご回答がありました。。。 タイミング悪くてすみませんです。 早速、やってみました。分かりやすいご回答どうもありがとうございます。 ↑に書いてあるとおりに、<a href="javascript:test2()"> としていました。 何とか、自力で出来ないかと、適当にいじり倒し、function test2()の一文の最後の、return 0; を消したら動いたのですが、それはきっと、良くないのですよね？ 所で、今度こそ最後のご質問にしたいのですが、MacのIEで検証してみたところ、全く反応しませんでした。ネスケはＯＫだったのですけど・・・。 これの、回避策はありませんでしょうか？ 実はそのサイトを見るユーザーのメインがMacのIEなのです・・・。 どうぞ、よろしくお願いいたします。
- sorarisp
- ベストアンサー率58% (7/12)
>ランダムでかつ、複数枚のページを表示させることが出来ますでしょうか？？？ 一度のアクションで複数のフレームにそれぞれページの表示ができるかということですか？ ↓つまり、こういう事ですか？ <script language="javascript"> <!-- function test(page_url,kp_num){ var rdm,i; do{ rdm = Math.floor(Math.random() * 4); for(i=0;i < kp_num.length;i++) if(kp_num[i] == rdm) break; }while(i < kp_num.length) switch(rdm){ case 0: top.fr1.location.href = page_url; break; case 1: top.fr2.location.href = page_url; break; case 2: top.fr3.location.href = page_url; break; case 3: top.fr4.location.href = page_url; break; } return rdm; } function test2(){ var kp_num = new Array(2); var i; for(i=0;i < 2;i++) kp_num[i] = -1; kp_num[0] = test('page_A.html',kp_num); kp_num[1] = test('page_B.html',kp_num); test('page_C.html<br>',kp_num); return 0; } //--> </script> この場合、test2を呼ぶ事でできます。 kp_num配列には前回表示されたフレームの番号を記録して 同フレームが選択されないようにしています。 (同じフレームに'page_A.html'、'page_B.html'、'page_C.html'が重なって表示されないようにしているわけです。）
補足
sorarispさん、ご回答どうもありがとうございます。 ものすごく近づきました。 ↑のご説明でお伺いしたいのですが、function test2()～の部分で、 page_A.htmlと、page_B.htmlは配列になっているのですが、page_Cが配列要素の中に入ってないのは何故でしょうか？ また、page_C.htmlの後の<br>は必要なのでしょうか？ それと、もうひとつ重大なところなのですが、上フレームのメニューの部分も、0と言う数字が表示されてページが入れ替わってしまいます。 これの回避方法ありましたら教えてください。 度々で、ややこしくて申し訳ございませんがどうぞよろしくお願いいたします。
- sorarisp
- ベストアンサー率58% (7/12)
たびたびすみません。 よく見ると、他にも誤りが。。。 Math.floor(Math.random() * 4); で取得できるのは 0～3 の整数なんですよね。。 switch関数のcaseが1～4になってる。。。 ああっ！雑な回答ですみません！ もうないでしょうね。。。
補足
sorarispさん、こんにちは。 どうもありがとうございました。 まさに、完璧に動きました。ものすごく感動です。 更に、ご質問させていただきたいのですが、ランダムでかつ、複数枚のページを表示させることが出来ますでしょうか？？？ もし、おわかりになるようでしたら、教えてください。 どうぞよろしくお願いいたします。
- sorarisp
- ベストアンサー率58% (7/12)
先ほどの回答に一部誤りがありました。 var rdm = Math.floor(Math.random() * 4); 小数点以下を切り捨てるのを忘れていました。
補足
sorarispさん、何度もどうもありがとうございます。 この投稿を見ていただけるのを祈って書き込んでいます。 実は、マックのIEで確認したのですが、ランダムも、複数のランダムも動きません・・・。何か原因、回避方法おわかりにならないでしょうか？ちなみに、ネスケは大丈夫のようでした・・・。 本当に度々すみませんです・・・。
- sorarisp
- ベストアンサー率58% (7/12)
ランダム関数を使えばできると思います <script language="javascript"> <!-- function test(page_url){ var rdm = Math.random() * 4; switch(rdm){ case 1: top.fr1.location.href = page_url; break; case 2: top.fr2.location.href = page_url; break; case 3: top.fr3.location.href = page_url; break; case 4: top.fr4.location.href = page_url; break; } } //--> </script> fr1～fr4は各フレーム名です。 page_urlには表示したいURLを渡します。 参考になれば幸いです。
一枚のhtmlで、上下２分割の下４分割はできないってことですかね？ だったらフレームの中にフレームを埋め込めば良いのではないですか？ 上下２分割したフレームで上の部分をクリックしたら、下のフレームに４分割したフレームのファイルを呼び出します。 TOPのソース <frameset rows="100,*"> <frame src="top.html" name="top"> <frame src="buttom.html" name="buttom"> </frameset> buttom.htmlのソース <frameset cols="100,200,300,*"> <frame src="buttom1.html" name="fr1"> <frame src="buttom2.html" name="fr2"> <frame src="buttom3.html" name="fr3"> <frame src="buttom4.html" name="fr4"> </frameset> というような感じ。 ただ単に上のメニュー部分から、下の任意のフレームに表示したいということであれば、リンクを貼るとき等に、キチンとtargetを指定してやればいいだけです。 各々の<frame>に、名前がかぶらないようにname属性を付けてください。 例えば上記のような場合でtop.htmlから、 <a href="index.html" target="fr1"> とリンクをはれば、４つに別れている下のフレームの、一番左にindex.htmlを表示することができます。 数が増えるとややこしくなりますので、がんばってください。
補足
早速の回答ありがとうございます。 えっと、問題を読み直すと、全然説明不足でした・・・。 質問に書いてある、BBSをクリックすると、下の4つのフレーム（fr1～fr4とします。）のどれかにランダムに表示させたいのです。 ターゲットの指定をランダムにすると言えばいいのでしょうか？ そのようなことは出来るのでしょうか？？？ 2度手間かと思うのですが、是非分かるようでしたら、教えていただきたいです。 よろしくお願いいたします。
お礼
sorarisp様 今週になってまで続いていまして、本当にどうもありがとうございます。 原因は、そのままコピペしていた私のせいです・・・。 おかげさまで無事にMacのIEでも動きました。 全角スペースが原因だったみたいです。 本当に本当にどうもありがとうございました！！ また、何かの質問した際などにもどうぞよろしくお願いいたします！！！