自作した再読込ボタンとブラウザにある再読込ボタンの連打防止について

Question

お世話になっております。質問をお願いします。

webページで単純に再読込が出来るボタンを作成しました。

<div class="btn_reload">
   <input type="button" value="再読込" onclick="window.location.reload();" />
</div>

.btn_reload {
    right: 25px;
    bottom: 20px;
    width: 50px;
    height: 50px;
}

このボタンを連打させないようにJSで制御したいのですが、なかなか上手く書けません。
単純にページが表示されてから5秒後にボタンを表示させれば、クリックして再読込したあとも
5秒間はボタンが表示されないので良いかなと思ったのですが、JSがほとんど書けないものでして…
申し訳ありませんがご教授頂けないでしょうか？

また、ブラウザにある再読込ボタンを連打されてしまったら意味が無いので、何かしら制御したいのですが
これについては方法が浮かびません。
この対策は簡単に対策出来るものではないのでしょうか？

よろしくお願いします。

追記
ブラウザやF5ボタンの連打はちょっと難しそうですので、今回は作成したボタンをページが表示されて5秒後にボタンが表示されるJSの動きの質問にさせて頂きます。

Answer 1

$(function() {
  $('.btn_reload').hide();
  setTimeout(function() { $('.btn_reload').show(); }, 5000);
});

どうせスクリプトが動かなければ意味のないボタンなので、スクリプトから書き出してもいいかもしれません。

Comments

[test_87097]

希望通りの動きが出来ました。
ありがとうございます!!

Answer 2

サーバー側での対処が難しければとりあえず気休め程度に
クッキーにカウンタをしかけておき頻度がたかいアクセス
（たとえば前回アクセスから1秒以内とか）が発生した時に
べつのエラーページに飛ばしてしまうとかでしょうかね

追記

クッキーをつかった処理を追記しておきます。
以下のscriptをページに埋め込んでおけば
適当にF5連打するとgoogleに飛びます。

<script>
if(getCookie('renda')==="1"){
//rendaというクッキーが存在していたらgoogleに飛ぶ
location.href='http://www.google.co.jp';
}
var d=new Date();
d.setTime( d.getTime() + 1000); //1秒後の未来
document.cookie = "renda=1;expires="+d.toGMTString();//rendaを1秒間だけ生かす

function getCookie(key){
  var params  = document.cookie.split(/; */);
  var ret=null;
  for(var i=0;i<params.length;i++){
    if(r=params[i].match(new RegExp("^"+key+"="+"(.*)"))){
      ret=r[1];
    }
  }
  return ret;
};
</script>

Comments

[test_87097]

ちょっと難しそうですので、今回は作成したボタンをページが表示されて5秒後にボタンが表示されるJSの動きの質問にさせて頂きます。

[yambejp]

クッキーをつかったsampleだけ上げておきました

Answer 3

ブラウザにある再読込ボタンを連打されてしまったら（中略）この対策は簡単に対策出来るものではないのでしょうか？

はい、原始的ですが効果があるものなので、「F5アタック」と呼ばれていたりもします（参考）。これを防ごうとすれば、サーバサイドで手を入れる必要があります。

そして気になったこととして、再読込の制限をさせたい事情はどのような感じなのでしょうか。

Comments

[test_87097]

事情としては再読込ボタンを作成しましたら誰かがいたずらでボタンを連打したみたいで
PV数がめちゃくちゃになったので、自作した再読込ボタンの表示を時間で制御したいと考えました。
その流れでそもそもブラウザにある再読込ボタンやF5を連打されたら同じことなのではと思い質問をさせてもらいました。
ただ、今回は自作した再読込ボタンがページ表示された何秒後かに表示されれば解決しますのでその書き方についてご教授頂ければと思います。

よろしくお願いします