JavaScript配列とiframeで連番通りに表示する方法

このQ&Aのポイント
  • JavaScriptの配列とiframeを使用して、連番通りにリンク先を表示したい場合、二つの配列を使用すると連番通りに表示されない問題が発生します。
  • 一つの配列を使用する場合は連番通りに表示されますが、二つの配列を使用する場合は解決策が必要です。
  • クリックごとに順番どおりにリンク先を表示する方法を知りたいと思います。ご教授いただけると幸いです。
回答を見る
  • ベストアンサー

JavaScript 配列とiframe

カテゴリを誤って投稿してしまいました。 インラインフレームを二つ(iframe1,iframe2)用意し、jQueryにてクリック出来るようにしたdiv要素のクリックで、それぞれのリンク先をJavaScriptの配列に収めた連番通り、1,2,3,4…htmlと表示させたいのですが、二つの配列を使用すると連番通りに表示されなくなります。(一つの配列使用では連番通りに表示されます。) 1クリックで、iframe1にはiframe1link1.htmlの表示、iframe2にはiframe2link1.htmlの表示。クリックごとにlink2,link3と順番どおりに表示する、これを可能にするお知恵を拝借したいと思い投稿させて頂きます。よろしくお願いいたします。 ================ (JavaScript(1)iframe1.js) var URLs=new Array(); var cnt=0; URLs[1]="iframe1link1.html"; ******* URLs[10]="iframe1link10.html"; function Jump1(){ cnt++; if(cnt==11) {cnt=0;} iframe1.location.href=URLs[cnt]; } ================= (JavaScript(2)iframe2.js) var URLs=new Array(); var cnt=0; URLs[1]="iframe2link1.html"; ******* URLs[10]="iframe2link10.html"; function Jump2(){ cnt++; if(cnt==11) {cnt=0;} iframe2.location.href=URLs[cnt]; } ================ (HTML) <!doctype html> <link rel="stylesheet" href="./css/style.css" type="text/css"> <script src="iframe1.js"></script> <script src="iframe2.js"></script> <title>sample</title> <div id="container" class="div" onclick="Jump1();Jump2()"> <div id="main"> <iframe src="./iframe1link0.html" id="iframe1"></iframe> <iframe src="./iframe2link0.html" id="iframe2"></iframe> </div> </div> これでは連番通りにいかない。 ====================

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

リンク先がlink0~link10なのかlink1~link10なのかよくわかりませんけれど、とりあえず連番みたいなのでそれを利用してもよいものと仮定して(=配列不要となる)… jQuery云々の部分は判かりかねますが、とりあえずのサンプル。 範囲の方は適当に修正してみてください。サンプルは1~10になるようにしてあります。 (counter内のmin、maxの値を修正すればいけるのではないかと) ご提示のJump1();Jump2()の処理はJump()にまとめてあります。 (全角空白は半角に) var counter = (function(){  var min = 1, max = 10;  var count = 0;  return function(){   count = ++count%(max + 1 -min);   return count + min;  } })(); function Jump(){  var i, f, cnt = counter();  for(var i=1; i<3; i++)   if(f=document.getElementById("iframe"+i))    f.src = "./iframe" + i + "link" + cnt + ".html"; }

HackHackHack
質問者

お礼

ご回答ありがとうございました。ご記載頂いたソースにて、配列を使わずとも理想通りの動作を得ることが確認出来ました。適切な修正を加え、ご回答者の皆様方から頂いたご教授とご指摘をもとに進めていきたいと思います。今回はfujilllin様のご回答をベストアンサーに、質問を締め切りさせて頂きます。ご回答頂いた皆様方、本当に有難うございました。今後とも宜しくお願いいたします。

その他の回答 (2)

  • dk3280243
  • ベストアンサー率31% (9/29)
回答No.2

フレームに表示させるファイルのタイプが、HTMLだろうと画像だろうと単一のファイルで出来ます。 <script src="iframe1.js"></script> <script src="iframe2.js"></script> これは、HTMLのその場所に、iframe1.js と iframe2.js の中身を書き込んでいるのと同じ動作をします。 つまり、2つ連続で書いているのだから、1つのファイルに書いても意味はまったく変わりません。 <script type="text/javascript"> iframe1.jsの内容 </script> <script type="text/javascript"> iframe2.jsの内容 </script> とHTMLに書いたのと同じ動作をします。 であれば <script type="text/javascript"> iframe1.jsの内容 iframe2.jsの内容 </script> と書いても iframe.js に2つのjsの中身を書いて <script src="iframe.js"></script> としてもすべて同じ動作になります。

HackHackHack
質問者

お礼

ご回答ありがとうございます。おっしゃられていることの理解は出来ているのですが、1つのjsファイルに2つの内容を書き記す方法がわかりかねまして、ご無理を言いますが、同じdiv要素のonclick jumpでiframe1にはiframe1に収納した内容を、iframe2にはiframe2に収納した内容を、それぞれ表示する何かソースのようなもののご提示をお願い出来ないでしょうか。

  • dk3280243
  • ベストアンサー率31% (9/29)
回答No.1

試してないので合っている保証はありませんが 変数のcntが2回インクリメントされているからでは? Javascriptを書いたファイルを分けたとしても、ブラウザが解釈するときには、同じページに書いているのと同じことになります。 簡単に解決する方法としてはcnt1 cnt2, URLs1, URLs2 をそれぞれ使って分けることかなーと思います。 僕なら、無駄に面倒なので分けて書いたりせずに、1つのファイルに書いて、関数も1つにしちゃいますが。 それからcntに0を代入して、11になったら0にもどしてますが、URLs[0]はundefinedにならないでしょうか? 1に戻せば大丈夫そうですが。 単純に考えて、1-10までの10個しか配列に値を代入してないのに、 1-10までの10個と0の1個の合計の11個を繰り返すようにするのは無理だと思いました。

HackHackHack
質問者

お礼

ご回答、ご指摘ありがとうございます。 おっしゃる通り、cntの理解が不十分で11になった際undefinedとなってしまいます。 質問では両方ともhtmlへのリンクを例として使用させて頂きましたが、一つはhtmlではなく、画像ファイルなどへのリンクを考えている為、1つのjsファイルとしての扱いは出来るのだろうか、とも考えていたところです。 なんにしろ、cntの扱いが不適切とわかっただけでも嬉しいです。ご回答感謝いたします。

関連する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にかんしてはあまり詳しくありませんので、ちょっと改変してコピペするくらいまでのソースを教えていただけませんでしょうか? よろしくおねがいします。

  • iframeクッキー2

    すみません。解決したと思っていたのに後で確認したところ、出来ていませんでした。 一度削除したのに、またこうやって立てて、申し訳ないです。 何度も試行錯誤しましたがまったくうまくいかなかったので質問させて頂きます。 testページではできたのですが、index.htmlの方にするとうまくいきません。 タグをおいておきます。 ************************* index.htmlの基本とiframe ************************* <html> <head> <title></title> <META>(3行、METAタグをおいています) <link rel="stylesheet" type="text/css" href="/standard.css"> <script language="JavaScript" src="/standard.js"></script> <script> function GetHeightForIndex(){ GetHeight("iframeのID"); } </script> </head> <body onLoad="Clock(),Ref()"> <table ~~~ ~~~ <td valign=top width=87% rowspan=2> <script type="text/javascript"> var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */ var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } var file = cook_src? cook_src[1] : 'a.htmlにあたるページアド'; (/inde.html なら、 /フォルダ名/a.html のファイルの位置にあります) document.write('<iframe class=tmain src="',file,'" id="iframeのid" name="iframeの名前" frameborder="0" scrolling="no" height="1500"></iframe>') function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } </script> <noscript> <iframe class=tmain src=.htmlにあたるページアド id="iframeのid" name="iframeの名前" frameborder=0 scrolling=no height=1500></iframe> </noscript> </td></tr> </table> </body> </html> ************************* index.htmlのリンク ************************* <a href=c.htmlにあたるページ onclick="setCook(this.href)">掲示板</a> </td><td class=white width=1> <div id="line"></div> </td><td class=white><center> <a href=d.htmlにあたるページ onclick="setCook(this.href)">チャット</a> a.htmlはテーブルリンクを使用しています。 <table ~~~ <td onClick="tmain.location.href='a.htmlにあたるページ',setCook(this.href)" STYLE="cursor:hand;"> ************************* standard.js ************************* 時計や更新日、iframeの高さ可変など~~~ //iframeクッキー var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */ window.onload = function(){ if(cook_src) document.getElementById('iframeのID').src = ''; var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } document.getElementById('iframeのID'').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.htmlにあたるページアド') : 'a.htmlにあたるページアド'; } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } こういう状態なのですがうまく機能されません。 この状態だと、 最初に表示されるa.html  × (表示されない。404になる。) b.thmlの表示と更新しても同じように表示される(クッキー有) ○ c.htmlやd.htmlなど、表示 ○  ↑の状態でを更新をおす。 ×  (a.htmlの最初に表示するときと同じように404) a.htmlのリンクを押す。(a.htmlが表示される) ○ document.write('<iframe class=tmain src="',file,'" id="iframeのid" name="iframeの名前" frameborder="0" scrolling="no" height="1500"></iframe>') の ',file,'の部分をa.htmlにあたるページに直すと、 最初に表示されるa.html、c.htmlとd.htmlを更新した際、共にa.htmlが正常に表示されたので、出来たのかと思ったのですが、 b.htmlで更新を押すと、クッキーが無になり、a.htmlが表示されるようになる。 何度もすみませんが、うまくいかず、困ったので教えてください。 P.S.  b.htmlのようなページを複数にする場合には、 リンクの onclick="setCook(this.href)" をb.htmlのようにしたいページのリンク(aタグ)に入れればいいですよね?

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id;  alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか? <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

  • postMessageによるiframeの書き換え

    iframeに表示している自身のブログを作成・修正するスクリプトを考えていますがうまくいきません。 「contentWindowで取得した変数の属性は読み取り専用なので、変数を操作するにはpostMessageを使う必要がある」といった記事があったので、自分なりにスクリプトを書いてみました。以下が、そのサンプルです。 親のparentから子のiframeに変数var1をpostMessageで送り、子側で変数var1を使ってoutputの内容を書き換えています。 しかし、これだとcontentWindowで変数を取得・操作を行なった場合と何ら変わらない結果になってしまいます。 つまりiframe.htmlを直接ブラウザで開いて表示しても、outputの表示内容が書き換わっていません。 どこに誤りがあるのでしょうか。 それとも「読み取り専用」に関する私の理解が間違っているのでしょうか。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>parent</title> </head> <body> <iframe id="iframe" src="iframe.html"></iframe></br> 天気<input type="text" id="var1" value=""> <input type="button" id="build" onclick="send()" value="データ送付"> <script type="text/javascript"> function send(){ var win = document.getElementById("iframe").contentWindow; win.postMessage(document.getElementById("var1").value, '*'); } </script> </body> </html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>iframe</title> </head> <body> <p>タイトル</p> <div id="output"></div> <div id="var1"></div> <script type="text/javascript"> window.addEventListener('load', function(){ var var1 = "晴れ"; build(var1); }); function onMessage(e) { var var1 = e.data; build(var1); } window.addEventListener("message", onMessage, false); function build(var1) { var output = "きょうは" + var1 + "です。"; document.getElementById("output").innerHTML = output; } </script> </body> </html>

  • javascriptで困ってます。

    モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか?よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>

  • iframeクッキー あと少しで

    またしても立ててしまいました。 自分の力ではどうしようも出来ないので、立てたことお許しください。 index.htmlのiframeに最初に表示されているページ a.html index.htmlの<a>タグリンクでiframe内に表示するページの内、  クッキーによって、更新おしてもiframe内を変えないページ b.html・c.html  クッキーを解除し、更新を押すと、a.htmlを表示するページ d.html・e.html 現在、今までの質問で以下のタグでiframeのクッキーを使用しています。 ************************************************************************** index.html ************************************************************************** <head>内  <script language="JavaScript" src="/standard.js"></script>  <script><!--  function GetHeightForIndex(){  GetHeight("tmain");  }  //--></script>  これは、iframeの高さ可変のタグです <body>内  <a href="b.html" onclick="setCook(this.href)">b</a>  <a href="c.html" onclick="setCook(this.href)">c</a>  <a href="d.html" onclick="setCook('')">d</a>   <a href="e.html" onclick="setCook('')">e</a> <script type="text/javascript"><!-- var cook_key = "iframesrc"; if(cook_src) document.getElementById('iframe名').src = 'a.html'; var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } var file = cook_src? cook_src[1] : 'a.html'; document.write('<iframe class="tmain" src="',file,'" id="iframeID" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe>') document.getElementById('tmain').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.html') : 'a.html'; function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } //--></script> <noscript> <iframe class="tmain" src="a.html" id="iframeId" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe> </noscript> ************************************************************************** standard.js ************************************************************************** //iframe高さ可変 function getIFrameDocument(aID){ if (document.getElementById(aID).contentDocument){ return document.getElementById(aID).contentDocument; } else { return document.frames[aID].document; } } function GetHeight(ID){ if (document.height) { document.getElementById(ID).style.height = getIFrameDocument(ID).height +20 +"px" ; }else{ document.getElementById(ID).style.height = getIFrameDocument(ID).body.scrollHeight +20 +"px"; } } //iframeクッキー var cook_key = "iframesrc"; window.onload = function(){ } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } user_pref("dom.disable_window_open_feature.scrollbars", true); ************************************************************************** この状態で現在、困っているのは  a.htmlを表示している状態で更新を押すと、iframe内が404になることです。 b.htmlなどで更新を押すと、b.htmlが表示されたままだし、 d.htmlなどで更新を押すと、a.htmlが表示されます。 解決方法教えてくださいっ。

  • jqueryとjavascriptの競合?

    どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap">  <div class="header"></div>  <div class="main">**フロートで左に配置   <iframe></iframe>  </div>   //1.   //jqueryの「iframe-auto-height」プラグインを使って、   //読み込まれた内容に応じてiframeの高さを変えるようにしたい。  <div class="menu">**フロートで右に配置</div>   //2.   //jqueryの「portamento」プラグインを使って、   //画面が縦長になりスクロールしてもこの「メニュー」が   //画面に追従してフロートするように(常に画面上に現れている様に)したい。   //3.   //このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■ 「1.」「2.」のjqueryは、同時にちゃんと動作しました。   が、「3.」を加えると「1.」が動きません。   「2.」は常に正常に動作します。   「1.」と「3.」が競合しているようなのですが、   私はみなさんが提供してくださっているスクリプトを“切り貼り”して   使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、   希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。  ★「3.フロートするメニューボックスの中のリンクから、    表示する内容に応じて高さが可変するiframeの内容を切り替える」    にはどのようにすればよいでしょうか? ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> /// 1.「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script>  ///3.「リンクでiframe内を切り替える」用。 </head> <body> ~ ~ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe>  /// 『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。  /// フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際  /// は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script>  /// 『autoheight』用スクリプト ~ ~ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script>  /// 『フロートボックス』用読み込み&スクリプト      </body> 内容は以上となります。 何卒よろしくお願いいたします。

  • JavaScriptでiframeの高さを自動調節する方法を試しているがうまくいかない

    JavaScriptでiframeの高さを自動調節する方法を 下記サイトを参考に試しているのですが、 読み込み先ファイルをphpファイルにするとうまくいきません。 http://www.revulo.com/blog/20070616.html 《参考サイトより example.html》 <head> ...... <script type="text/javascript"> function resizeIframe() { var iframe = parent.document.getElementById("recent_iframe"); var height = document.documentElement.scrollHeight; iframe.style.height = height + 10 + "px"; } </script> </head> <body onload="resizeIframe()"> ...... 上記のようなソースを子HTMLファイルに書いて、親HTMLファイルから <iframe id="recent_iframe" src="example.html"> </iframe> というように読み込むと問題なく子ファイルの大きさに iframeの高さが自動調節されて表示されるのですが、 参考サイトのソースをphpファイルに記載して、 iframeからフルパスで読み込もうとするとうまく高さが調節されません。 <iframe id="recent_iframe" src="フルパス/exsample.php"> </iframe> 解決策はありますか?

  • 【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本体と別のものを導入する必要があるのでしょうか。

  • リロードするまでの間のクリック数をカウントして表示

    重ね重ね質問すいません。 先ほど、『リンクボタンからインラインフレーム内にクリックするたび順番に別のサイトに飛ばすようにするにはどうしたらよいでしょうか?※ランダムではなくあらかじめ決めた順番で飛ばしたいです できるならソースを教えてください』。 という質問をして↓の答えを頂いたのですが、更にこれにリロードするまでの間のボタンのクリック数をカウントしてリアルタイムで表示したいのですがなにを付け加えたらよいでしょうか?※リロード行われたらリセットでお願いします <script> var urls=["ttp://okwave.jp/","ttp://oshiete.goo.ne.jp","ttp://qanda.rakuten.ne.jp"]; var idx=0; function clickFunc(){ idx=idx<urls.length -1?idx+1:0; document.getElementById("hoge").src=urls[idx]; } window.onload=function(){ document.getElementById("hoge").src=urls[0]; } </script> <input type="button" onclick="clickFunc()" value="go"> <hr> <iframe src="" id="hoge" width=80% height=500px;></iframe>