この記事では、ページを再読み込み(リロード)する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) を指定するとキャッシュからリロードされます。