スキルアップを始める!

JavaScript でページをプログラムから再読み込みする(window.location.reload)

JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

window.location.reload は、JavaScript でページをプログラムから再読み込みするためのメソッドです。このメソッドを実行すると、ユーザーがブラウザの「再読み込み」ボタンを押したときと同じ効果が得られます。

window.location.reloadの書式

window.location.reload(forceGet);

引数

reload メソッドは1つの引数を受け取ります。この引数はオプションです。

  • forceGet (オプション): 真偽値(Boolean)
    • true を指定すると、ブラウザがサーバーから最新のページを強制的に取得します。これはキャッシュを無視してページを再読み込みすることを意味します。
    • false または指定しない場合は、ブラウザがキャッシュされたページを使用して再読み込みします。

具体例1. キャッシュを使用してページを再読み込みする場合

ページがブラウザのキャッシュに保存されている場合、そのキャッシュを使用して再読み込みが行われます。

window.location.reload();

または

window.location.reload(false);

2. サーバーから最新のページを再取得して再読み込みする場合

ブラウザがキャッシュを無視して、サーバーから最新のページを取得し、再読み込みを行います。

window.location.reload(true);

詳細な使用シナリオ1: フォームのリセット

フォーム送信後にページをリセットしたい場合があります。この場合、ユーザーがフォームを再度入力するためにページをリロードすることができます。

document.querySelector('form').onsubmit = function(event) {
event.preventDefault(); // デフォルトのフォーム送信を防ぐ
window.location.reload(); // ページを再読み込み
};

シナリオ 2: 更新されたデータの取得

アプリケーションがサーバー上のデータを頻繁に更新する場合、ユーザーが常に最新の情報を表示するためにページをリロードする必要があります。

function checkForUpdates() {
fetch('/check-updates').then(response => response.json()).then(data => {
if (data.hasUpdates) {
window.location.reload(true); // 最新のデータを取得してページを再読み込み
}
});
}
setInterval(checkForUpdates, 60000); // 1分ごとに更新をチェック

まとめ

window.location.reload は、現在のページを再読み込みするための便利なメソッドです。オプションの引数を使用して、キャッシュを使用するか、サーバーから最新のページを取得するかを制御できます。具体的なシナリオに応じて適切な方法を選択してください。

URLをコピーしました!