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

このQ&Aのポイント
  • クリック数をリアルタイムで表示する方法
  • リロード時にクリック数をリセットする方法
  • クリック順番で別のサイトに飛ばす方法
回答を見る
  • ベストアンサー

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

重ね重ね質問すいません。 先ほど、『リンクボタンからインラインフレーム内にクリックするたび順番に別のサイトに飛ばすようにするにはどうしたらよいでしょうか?※ランダムではなくあらかじめ決めた順番で飛ばしたいです できるならソースを教えてください』。 という質問をして↓の答えを頂いたのですが、更にこれにリロードするまでの間のボタンのクリック数をカウントしてリアルタイムで表示したいのですがなにを付け加えたらよいでしょうか?※リロード行われたらリセットでお願いします <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>

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

これでどうでしょう? (ttpは当然httpに書き換えてくださいね) <script> var urls=["ttp://okwave.jp/","ttp://oshiete.goo.ne.jp","ttp://qanda.rakuten.ne.jp"]; var idx=0; function clickFunc(){ idx++; document.getElementById("hoge").src=urls[idx % urls.length]; document.getElementById("fuga").value=idx; } window.onload=function(){ document.getElementById("hoge").src=urls[0]; } </script> <input type="button" onclick="clickFunc()" value="go"><input type="text" name="fuga" id="fuga" value="0" style="text-align:right">回 <hr> <iframe src="" id="hoge" width=80% height=500px;></iframe>

takum1986
質問者

お礼

毎度ありがとうございます^^ ちょうど希望通りの感じになってます、ありがとうございました。

関連するQ&A

  • ボタンを一回押したら3秒間押せなくしたいです

    以前下記のような質問をして答えていただいたのですが、これにリンクボタンを一回押したら決められた秒数(3秒間)押せないように設定したいのですがどうしたらよいでしょうか? 3秒後にまた押せる仕組みにしたいです。 『リンクボタンからインラインフレーム内にクリックするたび順番に別のサイトに飛ばすようにするにはどうしたらよいでしょうか?※ランダムではなくあらかじめ決めた順番で飛ばしたいです 更にこれにリロードするまでの間のボタンのクリック数をカウントしてリアルタイムで表示したいのですがなにを付け加えたらよいでしょうか?※リロード行われたらリセットでお願いします <script> var urls=["ttp://okwave.jp/","ttp://oshiete.goo.ne.jp","ttp://qanda.rakuten.ne.jp"]; var idx=0; function clickFunc(){ idx++; document.getElementById("hoge").src=urls[idx % urls.length]; document.getElementById("fuga").value=idx; } window.onload=function(){ document.getElementById("hoge").src=urls[0]; } </script> <input type="button" onclick="clickFunc()" value="go"><input type="text" name="fuga" id="fuga" value="0" style="text-align:right">回 <hr> <iframe src="" id="hoge" width=80% height=500px;></iframe>

  • ランダムにページを表示するスクリプト

    最近社内のホームページを作ることになった初心者です。 トップページの中に3箇所、インラインフレームを使い別のページを 表示させるというものを考えております。 その際に、インラインフレーム内に表示させるページがランダムで選ばれるようにscriptを用いてやってみましたが、3箇所あるインラインフレームのうちの1箇所にしか表示されません・・・。 <script type="text/javascript"> window.onload = function(){ var c = 3; // var ifm = document.getElementById('aaa'); var ifm = document.getElementById('bbb'); var ifm = document.getElementById('ccc'); var r = Math.floor( Math.random() * c ); var urls = new Array(); urls[0] = 'http://www.co.jp'; urls[1] = 'http://www.co.jp'; urls[2] = 'http://www.co.jp'; ifm.src = urls[r]; } </script> あとは3箇所のフレーム内にIDを設定すれば上手く良くと思ったのですが、1箇所にしか表示されません;; 改善点などございましたらご教授いただけないでしょうか?

  • ランダムURL表示&被らないようにしたいです!

    window.onload = function(){ var nice_a = 3; var nice_b = 3; var nice_c = 3; var nice_d = 3; var ifm_3 = document.getElementById('nice_1');//1つめ var ifm_4 = document.getElementById('nice_2');//2つめ var ifm_5 = document.getElementById('nice_3');//3つめ var ifm_6 = document.getElementById('nice_4');//4つめ var urls_random_1 = Math.floor( Math.random() * nice_a ); var urls_random_2 = Math.floor( Math.random() * nice_b ); var urls_random_3 = Math.floor( Math.random() * nice_c ); var urls_random_4 = Math.floor( Math.random() * nice_d ); var urls_nice_1 = new Array(); var urls_nice_2 = new Array(); var urls_nice_3 = new Array(); var urls_nice_4 = new Array(); /*1*/ urls_nice_1[0] = 'niceStore/niceStore_1.html'; urls_nice_1[1] = 'niceStore/niceStore_2.html'; urls_nice_1[2] = 'niceStore/niceStore_3.html'; /*2*/ urls_nice_2[0] = 'niceStore/niceStore_1.html'; urls_nice_2[1] = 'niceStore/niceStore_2.html'; urls_nice_2[2] = 'niceStore/niceStore_3.html'; /*3*/ urls_nice_3[0] = 'niceStore/niceStore_1.html'; urls_nice_3[1] = 'niceStore/niceStore_2.html'; urls_nice_3[2] = 'niceStore/niceStore_3.html'; /*4*/ urls_nice_4[0] = 'niceStore/niceStore_1.html'; urls_nice_4[1] = 'niceStore/niceStore_2.html'; urls_nice_4[2] = 'niceStore/niceStore_3.html'; ifm_3.src = urls_nice_1[s];//1 ifm_4.src = urls_nice_2[s];//2 ifm_5.src = urls_nice_3[s];//3 ifm_6.src = urls_nice_4[s];//4 } </script> 求める結果:ページをロードする度、それぞれのiframe内のURLがランダムで選定され 尚かつURLが被らないようにしたいです。 上記の内容で記述しますと、あたりまえですが表示されるURLが被ってしまいます。 これを回避したいのですがどうがご教授願いします。m(_ _)m

  • iframe内をリロードできますか?

    たとえば <HTML> <head> <script language="javascript"> <!-- function a1reload(){ "iframe内をリロードする文章" } //--> </script> </head> <body> <iframe src="a1.html" id="a1iframe"><br> <a href="javascript: a1reload()">ここをクリック</a> </body> </HTML> こんな感じで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> これでは連番通りにいかない。 ====================

  • 複数の<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クッキー あと少しで

    またしても立ててしまいました。 自分の力ではどうしようも出来ないので、立てたことお許しください。 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が表示されます。 解決方法教えてくださいっ。

  • PHPにiframeでニュースを表示

    PHPを利用したショッピングカートのトップにニュースを掲載しようとしています。 ニュースはCGIで管理しています。 高さを自動調整するJavaScriptを組んでみたのですが、ページを開いた時1行分しか表示せず、リロードすると自動サイズではなく"iframeで設定したサイズ"になってしまいます。 <script language="JavaScript"> <!-- function GetHeight(Y,NAME) { var app = navigator.appName.charAt(0); if(navigator.userAgent.indexOf('Safari') != -1){ document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; }else if (app == "N") { document.getElementById(Y).height = parent.frames[NAME].document.height +80; } else { document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; } } // --> </script> <iframe src="./info.cgi?mode=contents2&cont=JP" onload="GetHeight(this.id,this.name)" id="Z" name="newZ" height="500"「←このサイズになる」 width="100%" frameborder="0" marginheight="0" marginwidth="0"> </iframe> これは何が悪いのでしょうか? もしかして、文字コードが関係していますか? PHPはEUC-JP、iframe先はShift_JISです。

    • 締切済み
    • PHP
  • 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>

  • 画像をクリックし多数サイトから選んで新しくブラウザを開く方法は?

    お世話になります。 ナビゲーションバーを作りたいのですが、 下の方法だと、画像をクリックしてもホームページに移動はしますが、 新しくWindowが開きません。 画像をクリックすると、多数の中からURLを選択し、 新しくブラウザを開く形にしたいのですが、どのようにすればよいのでしょうか? 下のものとまったく違う方法でもかまいません。 よろしくお願いします。 -------------------------- <html> <head> <script type="text/javascript"> <!-- urls = new Array() urls [1] = "a.html" urls [2] = "b.html" urls [3] = "c.html" var max=urls.length-1, place=0 function findthis() { thisURL=document.URL.toLowerCase(); for (var i=1; i<=max; i++){ if (thisURL==urls[i]) place=i; } } function go(where) { location = urls[where]; } function next() { findthis(); if (place==max) place=1; else place=place+1; go(place); } function previous() { findthis(); if (place<=1) place=max; else place=place-1; go(place); } function getRandom() { return Math.random() } function random() { findthis(); myrand=Math.round(getRandom()*(max)); if ((place==myrand) || (myrand==0)) random(); else { place=myrand; go(place); } } //--> </script> </head> <body> <Img src="previous.gif" onClick="previous()"> <Img src="next.gif" onClick="next()"> <Img src="random.gif" onClick="random()"> </body> </html>

専門家に質問してみよう