フレームのランダム選択方法

ご質問させていただきます。
例えば、上下2分割になっていて、上のフレームがメニュー用のフレーム、
下のフレームが更に4分割だとして、メニュー（例えばBBS）をクリックすると、
下フレームのどれかに、クリックするたびに画面が表示されるようにしたいと思っています。

何かよい方法はございませんでしょうか？
おわかりになるようでしたら、ご回答お願いいたします。

No.1 回答者： noname#1785 回答日時： 2002/01/08 18:11

一枚の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度手間かと思うのですが、是非分かるようでしたら、教えていただきたいです。
よろしくお願いいたします。

補足日時：2002/01/08 18:29

No.2 回答者： sorarisp 回答日時： 2002/01/10 10:53

ランダム関数を使えばできると思います

<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を渡します。

参考になれば幸いです。

No.3 回答者： sorarisp 回答日時： 2002/01/10 11:02

先ほどの回答に一部誤りがありました。

var rdm = Math.floor(Math.random() * 4);

小数点以下を切り捨てるのを忘れていました。

この回答への補足

sorarispさん、何度もどうもありがとうございます。

この投稿を見ていただけるのを祈って書き込んでいます。
実は、マックのIEで確認したのですが、ランダムも、複数のランダムも動きません・・・。何か原因、回避方法おわかりにならないでしょうか？ちなみに、ネスケは大丈夫のようでした・・・。

本当に度々すみませんです・・・。

補足日時：2002/01/10 19:07

No.4 回答者： sorarisp 回答日時： 2002/01/10 11:12

たびたびすみません。

よく見ると、他にも誤りが。。。

Math.floor(Math.random() * 4);

で取得できるのは 0～3 の整数なんですよね。。

switch関数のcaseが1～4になってる。。。

ああっ！雑な回答ですみません！

もうないでしょうね。。。

この回答への補足

sorarispさん、こんにちは。
どうもありがとうございました。
まさに、完璧に動きました。ものすごく感動です。

更に、ご質問させていただきたいのですが、ランダムでかつ、複数枚のページを表示させることが出来ますでしょうか？？？

もし、おわかりになるようでしたら、教えてください。
どうぞよろしくお願いいたします。

補足日時：2002/01/10 16:04

No.5 回答者： sorarisp 回答日時： 2002/01/10 18:22

>ランダムでかつ、複数枚のページを表示させることが出来ますでしょうか？？？

一度のアクションで複数のフレームにそれぞれページの表示ができるかということですか？

↓つまり、こういう事ですか？

<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と言う数字が表示されてページが入れ替わってしまいます。
これの回避方法ありましたら教えてください。

度々で、ややこしくて申し訳ございませんがどうぞよろしくお願いいたします。

補足日時：2002/01/10 18:33

No.6 回答者： sorarisp 回答日時： 2002/01/10 19:07

>また、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なのです・・・。

どうぞ、よろしくお願いいたします。

補足日時：2002/01/10 19:22

No.7 回答者： sorarisp 回答日時： 2002/01/10 20:19

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>

本当に申し訳ございませが、上記で違うようでしたら、
ご回答、度々ですがよろしくお願いいたします。

補足日時：2002/01/10 22:18

No.8 回答者： sorarisp 回答日時： 2002/01/11 10:18

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では、前回同様動きませんでした・・・。

もう、これ以上の方法はありませんでしょうか？？
これ以上の回避方法あるようでしたら、ご回答お願いいたします。

補足日時：2002/01/11 16:14

No.9 回答者： sorarisp 回答日時： 2002/01/11 17:16

すみません。

勘違いをしていたようです。
MacにIE5.5は存在しないようですね。。。
確認したわけではありませんが。。

IEで動作しないのはどうも別の理由があるようです。

現在お使いのIEのバージョン等を教えていただけますか?

それと、インターネットセキュリティのJavascriptが有効になっているのかを確認してみてください。

この回答への補足

sorarispさま

昨日から、↑に対してレス書いているのですが、何故かここで反映されません・・・。

環境ですが、MacのIE5.0です。
そして、インターネットセキュリティのjavascriptは有効になっております。

どうぞよろしくお願いいたします。

補足日時：2002/01/12 18:26

No.10 ベストアンサー 回答者： sorarisp 回答日時： 2002/01/15 13:45

もしかしたら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();

このような感じになります。

この回答へのお礼

sorarisp様

今週になってまで続いていまして、本当にどうもありがとうございます。
原因は、そのままコピペしていた私のせいです・・・。

おかげさまで無事にMacのIEでも動きました。
全角スペースが原因だったみたいです。
本当に本当にどうもありがとうございました！！

また、何かの質問した際などにもどうぞよろしくお願いいたします！！！

お礼日時：2002/01/15 16:28