JavaScriptでページを再読み込み：location.reload()
JavaScriptでページを再読み込み
JavaScriptのlocation.reload()：ページを正しく再読み込みする方法 | We.Inc
location.reload()でページを再読み込みし、history.go(0)、replace、meta refreshと比較し、定期更新のコードを生成して、reload(true)が実際に何をするかを学びましょう。
現在のページを再読み込みするには、location.reload()を呼び出します。ブラウザーの再読み込みボタンとまったく同じ動作です。標準の引数はありません。キャッシュを無視するための古いreload(true)の形式は非標準のパラメーターで、MDNではFirefoxのみサポートとされているため、他のブラウザーはtrueを無視します。history.go(0)でも再読み込みできます。
ページを更新または移動する方法
- location.reload()
- 現在のURLを再読み込みする
- されない
- history.go(0)またはhistory.go()
- location.reload()と同じ結果
- されない
- location.replace(url)
- urlを読み込み、現在の履歴エントリーを置き換える
- されない、戻るで古いページは飛ばされる
- location.assign(url)
- urlを新しいステップとして読み込む
- される
- <meta http-equiv="refresh" content="30">
- 30秒後に再読み込み、スクリプト不要
- されない
再読み込みはコード1行ですが、使う理由はさまざまです：新しいデータを取得する、動かなくなった状態をリセットする、ダッシュボードを定期的に更新する、サイトの新しいバージョンを強制的に読み込む、などです。このガイドでは標準の呼び出し方、古い書き方が実際に何をするか、そして新しいデータを取得するだけで済む場合に再読み込みを完全に避ける方法を紹介します。
- 生成ツールで更新方法と間隔を選びます。
- コード欄が、その方法に合わせたすぐに貼り付けられるスニペットに更新されます。
- ボタンを使って、このページでlocation.reload()とhistory.go(0)を試せます。どちらもページを再読み込みします。
- 新しくデプロイしたファイルを表示するために再読み込みに頼る前に、キャッシュのセクションを読んでください。
- location.reload()は何も返さず、ページがアンロードされる前にその後のコードが少し実行されることがあるので、最後に置きましょう。
- フォームのあるページを再読み込みする前に、beforeunloadリスナーで未保存の入力について警告しましょう。ブラウザーはあなたのメッセージではなく、独自の汎用メッセージを表示します。
- 非表示のタブでの定期更新は、通信量とバッテリーを無駄にします。document.visibilityStateを確認し、タブがバックグラウンドにある間は再読み込みをスキップしましょう。
- シングルページアプリでは、データの再取得や状態のリセットのほうが通常は速く、スクロール位置、入力内容、フォーカスも保たれます。
よくある質問
location.reload(true)でキャッシュはクリアされますか？
確実ではありません。forceGet引数はHTML標準の一部ではなく、MDNによるとサポートしているのはFirefoxだけです。他のブラウザーはこれを無視して通常の再読み込みを行います。確実に新しいファイルを届けるには、アセットのURLにバージョンを付けるか、適切なCache-Controlヘッダーを設定しましょう。
location.reload()とlocation.href = location.hrefの違いは何ですか？
reload()は常に現在のドキュメントを再読み込みします。hrefへの代入はそのURLへのナビゲーションを開始しますが、URLに#フラグメントが含まれる場合、ブラウザーはフラグメントまでスクロールするだけで、何も再読み込みしません。再読み込みしたいならreload()を使いましょう。
30秒ごとにページを更新するには？
スクリプトなしなら、headに<meta http-equiv="refresh" content="30">を追加します。スクリプトを使うなら、setTimeout(() => location.reload(), 30000)です。自動更新は控えめに使いましょう。MDNは、予期しない更新は利用者を混乱させ、タイミングに関するWCAGのガイダンスに反する可能性があると警告しています。
スクリプトから別サイトのページを再読み込みできますか？
できません。別オリジンのLocationでreloadを呼び出すとSecurityErrorのDOMExceptionが発生するため、別サイトのiframe内のスクリプトは親ページを再読み込みできず、親ページもその方法でiframeを再読み込みできません。
ページを一度だけ再読み込みするには？
sessionStorageのフラグや?r=1のようなクエリパラメーターなどで再読み込み済みであることを記録し、reloadを呼ぶ前にそれを確認します。このガードがないと、読み込み時に再読み込みするコードは無限ループになります。
再読み込みと新しいデータの取得の違い
- 完全な再読み込みはページ全体を捨てます：DOM、すべての変数、開いているメニュー、入力内容、そして通常はスクロール位置もです。ページがおかしな状態にあるときや、新しいバージョンを読み込む必要があるときには、これが正しいリセット方法です。
- ダッシュボードの数値を新しくしたいだけなら、fetchを呼び出し、変わった部分だけを更新して、残りはそのままにしましょう。より速く、通信量も少なく、画面がちらつきません。
再読み込みしても古いファイルが表示される理由
- 通常の再読み込みでは、ブラウザーはキャッシュしたファイルをサーバーに再検証させますが、長いキャッシュ期間で配信されたファイルはキャッシュから直接読み込まれることがあります。JavaScriptから強制的にハードリフレッシュしようとするコードでは、すべてのブラウザーでこれを解決することはできません。
- 確実な解決策はサーバーとビルドにあります。スクリプトとスタイルのファイル名にコンテンツハッシュを含めてデプロイごとに新しいURLになるようにし、HTMLは短いキャッシュ期間またはno-cacheで配信して、常に最新のファイルを指すようにしましょう。
貼り付けて使える再読み込みコード
再読み込みボタン
クリックハンドラーが、引数なしで標準のreloadを呼び出します。
タイマーで更新、ただしタブが表示されている間だけ
非表示のタブはスキップされ、間隔を過ぎてから戻ってきたタブはすぐに再読み込みされます。
ちょうど一度だけ再読み込み
sessionStorageのフラグは同じタブでの再読み込み後も残るので、2回目の読み込みではスキップされます。
未保存の変更があるとき再読み込み前に警告
ブラウザーは、利用者がページを操作した後にしか確認ダイアログを表示せず、文言もブラウザー独自のものになります。
更新コード生成ツール
ページをどのように、どのくらいの頻度で更新するかを選び、スニペットをコピーしてください。
方法
今すぐ再読み込み
JavaScriptのタイマー
タイマー、表示中のタブのみ
HTMLのmeta refresh
{n}秒ごと
スニペット
このページで試す
location.reload()
history.go(0)
どちらのボタンもこのページを再読み込みします。上で入力した内容は失われます。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る