みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

複数の<iframe>内にHTMLをランダム表示

以下のようなソースで、ランダムにHTMLをIFRAMEに読み込むソースを書いています。

(Javascript)
window.onload = function(){
var c = 23; //ランダムに表示するiframe内URLの数
var ifm = document.getElementById('aaa');//frameIDを入力
var r = Math.floor( Math.random() * c );
var urls = new Array();
urls[0] = '../text/1.html';
urls[1] = '../text/2.html';
urls[2] = '../text/3.html';
urls[3] = '../text/4.html';
urls[4] = '../text/5.html';
urls[5] = '../text/6.html';
urls[6] = '../text/7.html';
urls[7] = '../text/8.html';
urls[8] = '../text/9.html';
urls[9] = '../text/10.html';
ifm.src = urls[r];
}

(HTML)
<iframe src="#" id="aaa" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe>

このような要領で、
id="aaa"にはtextフォルダ内のファイル1.html~10.htmlのうちからランダムで、
id="bbb"にはtextフォルダ内のファイル11.html~20.htmlのうちからランダムで、
id="ccc"にはtextフォルダ内のファイル21.html~30.htmlのうちからランダムで、
・・・・
といった感じで以下のようなソースでそれぞれ読み込めればと思っているのですが、どうやったら可能でしょうか?
<iframe src="#" id="aaa" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe>
<iframe src="#" id="bbb" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe>
<iframe src="#" id="ccc" frameborder="0" marginwidth="0" width="115" marginheight="0" scrolling="no"></iframe>
javascriptにかんしてはあまり詳しくありませんので、ちょっと改変してコピペするくらいまでのソースを教えていただけませんでしょうか?
よろしくおねがいします。

投稿日時 - 2012-03-19 15:20:21

QNo.7371262

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

こんにちは。

ファイル名が連番で3つのエリアに10個ずつなら機械的に出来ると思います。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【OKWave回答サンプル集】複数の&lt;iframe&gt;内にHTMLをランダム表示</title>
<link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" />
<script type="text/javascript">
window.onload = function() {
for ( var i = 0; i < 3; i ++ ) {
document.getElementById('ifr'+(i+1)).src =
'page.php?p=' + (Math.floor(Math.random()*10)+i*10+1);
//document.getElementById('ifr'+(i+1)).src =
//'../text/' + (Math.floor(Math.random()*10)+i*10+1) + '.html';
}
}

</script>
<style type="text/css">
</style>
</head>
<body>
<h1>複数の&lt;iframe&gt;内にHTMLをランダム表示(q7371262)</h1>
<h2>サンプル</h2>
<iframe src="blank.html" id="ifr1" frameborder="0" marginwidth="0" width="200" height="60"></iframe>
<iframe src="blank.html" id="ifr2" frameborder="0" marginwidth="0" width="200" height="60"></iframe>
<iframe src="blank.html" id="ifr3" frameborder="0" marginwidth="0" width="200" height="60"></iframe>
</body>
</html>
<!-- q7371262 -->

投稿日時 - 2012-03-19 17:52:40

あなたにオススメの質問