【JavaScript】リロードボタンを作る(スーパーリロードも)

ブログ100記事超えたので心機一転でブログを更新していきます。ってことで今回はJavaScriptでのリロードボタンについて書いてみます。

ボタンは?

<a>タグでも<input>タグでも<button>タグ、<span>タグなどでも可です。今回は<input type=”button”>でボタンを作ってみます。

[HTML]

<p><input type="button" id="reload"></p>

HTMLでボタンの準備は完了したので今度はJavaScriptでリロード機能を実装していきます。

リロードボタンを作ってみる

リロード自体の機能は以下のようにします。

[JavaScript]

window.location.reload();

リロード自体はこれでいいのですが、『ボタンをクリック』というイベントがないとリロードが出来ません。2つのやり方を見てみます。

addEventListenerでクリックイベント

まずはaddEventListenerを使ってクリックイベントしたときに関数でリロードをするというやり方から見ています。

[JavaScript]

var reload =document.getElementById('reload');
reload.addEventListener('click',function(){
  window.location.reload();
});

id=”reload”を変数reloadに代入したのち、id=”reload”をクリックした時にfunctionの中身が呼び出されるという流れです。

onclickで関数を呼び出す

もう一つはHTMLにonclick属性をつける手順です。

[HTML]

<p><input type="button" onclick="window.location.reload();"></p>

HTML内でJavaScriptを呼び出しています。これだけで済むのでJavaScript自体は短くできます。※AMPではこのままだとエラーになるのでご注意ください。

スーパーリロードは?

普通のリロードだとキャッシュが残ってしまうので、場合によってはうまくCSSなどが反映されない可能性があります。キャッシュについて詳しくはこちらをご覧ください。

ずばり6つ!!　CSSが反映されない時にチェックすること

CSSでいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。 キャッシュが残って...

sunsukeblog.com

2018-09-21 19:20

方法はとても簡単です。

window.location.reload(true);

とはいえ、ブラウザゲームぐらいでしかリロードボタンの必要性は思い浮かびませんが…

ましてやスーパーリロードなんて、本来のユーザーにしたらキャッシュの有効化によってページ表示スピードが上がるものを自ら重くするわけなので使いどころは慎重に見極めましょう。

リロードについてと、クリックイベントについて触れてきました。クリックイベントはJavaScriptでよく使うものなのでしっかりマスターしておきましょう。