JavaScript

現在のページのリロード(再読み込み)するreload()【JavaScript】

この記事では、ページを再読み込み(リロード)するreload()について解説します。

また、デモで再読み込みのリロードボタンを実装します。

ページのリロード(再読み込み)するreload()

再読込ボタンの設置は簡単です。

window.location.reload()を使います。

デモ

「再読込」のボタンをクリックすると「日付・時刻が更新される」というデモです。

サンプルコード

function pageLoad() {
  var now = new Date();
  document.getElementById('now').innerHTML = now;
}
function pageReload() {
  window.location.reload();
}
<body onload="pageLoad();">
<div id="now"></div>
<input type="button" value="再読込" onclick="pageReload()">
</body>

ページを読み込んだ際に、まずonload="pageLoad()"が実行され、現在の日付・時刻が表示されます。

再読込ボタンをクリックするとpageReload()が実行され、ページを再読込し、再度、onload="pageLoad()"が実行されます。

reload()の補足

引数に、location.reload(true) を指定するとWebサーバのデータからリロードされ、location.reload(false) を指定するとキャッシュからリロードされます。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2024 ウェブつく Powered by AFFINGER5