【JavaScript】

ページをリロード(再読み込み)・スーパーリロードする方法

location.reload()の使い方とキャッシュクリア

投稿日 2021/08/30 更新日 2021/08/30


こんにちは。当サイトの管理者「元木皇天」です。

Webページを作成しているときに、JavaScriptを使用してページをリロード(再読み込み、更新)または、スーパーリロード(キャッシュクリアして再読み込み、更新)を行いたい時があると思います。

今回はJavaScriptを使用してWebページをリロードする方法について解説したいと思います。


環境
OS:MacOS Big Sur
GoogleChrom:バージョン92.0.4515.159

やりたいこと

1.Webページをリロード(再読み込み)する

以下実装イメージ
(例としてボタン押下時にリロードするようにします)




2.Webページをスーパーリロード(キャッシュクリアして再読み込み)する

以下実装イメージ
(例としてボタン押下時にリロードするようにします)



参考文献
JavaScript コードレシピ集
location.reload()公式リファレンス
Location公式リファレンス(日本語版)
Location公式リファレンス(英語版)

リロード(再読み込み)する方法

JavaScriptを使用して、Webページをリロードする方法は至って簡単です。

リロードするコードは以下になります。

location.reload();

これを実行することで、ブラウザの更新ボタンを押した時と同等の処理を行うことができます。


実際どのような動きをするのかは、以下のボタンを押して確認してみてください。

スーパーリロード(キャッシュクリアして再読み込み)する方法

次に、JavaScriptを使用してWebページをスーパーリロードする方法について解説します。と言っても、スーパーリロードする方法も大きく変わりません。以下のように、reload()メソッドの引数にtrueを渡すだけです。

2021/12/11 更新

jsでlocation.reload()を使用してスーパーリロードする方法はないことがわかりました。

理由は、公式ドキュメントにそう記載があったからです。

詳細は下記の補足欄を参考にしてください。

よくlocation.reload(true)でスーパーリロードできると色々なサイトで見かけますが、偽情報なので信用しないよう気をつけてください。

location.reload(true);

これを実行することで、キャッシュクリアをしてからページの読み込みを行うことが可能です(ctrl + F5と同等)。

実際どのような動きをするのかは、以下のボタンを押して確認してみてください。

下のボタンは「location.reload(true)」で実装したボタンです。一応更新処理は動きますのでご参考までに。。



--補足--

一部の記事では、スーパーリロードをreload(true)で行うのはデマではないかと記述している人がいらっしゃいます。
確かに、僕もこの記事を書くにあたって調査を行った際に同様にデマではないかと思いました。 その理由としては、以下の公式リファレンスのページにreload()の引数についての記述が一切なく、キャッシュがクリアできると言った記述もないからです。

location.reload()公式リファレンス

引数の記述ないじゃん!デマが流れている!と思いつつ、一つ前のページ(Locationオブジェクトに関するページ)を眺めていたところ、以下のような記述がありました。

現在の URL のリソースを再読み込みします。省略可能な唯一の引数は Boolean 値で、true であれば常にサーバーからページを再読み込みします。false を指定するか値を指定しない場合は、ブラウザーがキャッシュからページを再読み込みする可能性があります。

か、書いてあった。。。

詳細ページには書かずに、一つ前のページに記載するこのリファレンスくそだなと思いつつ、デマではなかったのでとりあえず安心しました。

ちなみに、キャッシュクリアについて書かれたページがこちらです。

Location公式リファレンス(日本語版)


2021/12/11 更新

そう、書いてあったので「デマだ!」という情報がデマだと思ったのですが、久々に調査しなおしたらやはりスーパーリロードはできないことがわかりました。

今まで僕は、日本語の公式ドキュメントを参考にしていたのですが、英語版を確認したところ以下のような記述がありました。

location.reload() has no parameterFirefox supports a non-standard forceGet boolean parameter for location.reload(), to tell Firefox to bypass its cache and force-reload the current document. However, in all other browsers, any parameter you specify in a location.reload() call will be ignored and have no effect of any kind.You may, though, come across instances of location.reload(true) in existing code that was written with the assumption the force-reload effect occurs in all browsers. A GitHub "location.reload(true)" search returns several hundred thousand results. So there’s a lot of existing code which has it.The history of it is: some version of Netscape Navigator added support for it, which apparently eventually got picked up in Firefox. And at one point the W3C Web APIs Working Group took up an issue to consider adding it to the specification for location.reload(). However, it was never actually added.So a boolean parameter is not part of the current specification for location.reload() — and in fact has never been part of any specification for location.reload() ever published.

ちなみに直訳するとこんな感じです。

location.reload()にはパラメーターがありません Firefoxは、location.reload()の非標準のforceGetブールパラメータをサポートしており、Firefoxにキャッシュをバイパスして現在のドキュメントを強制的に再ロードするように指示します。ただし、他のすべてのブラウザーでは、location.reload()呼び出しで指定したパラメーターは無視され、いかなる種類の効果もありません。 ただし、force-reload効果がすべてのブラウザーで発生することを前提として記述された既存のコードで、location.reload(true)のインスタンスに遭遇する可能性があります。 GitHubの「location.reload(true)」検索では、数十万件の結果が返されます。したがって、それを含む既存のコードはたくさんあります。 その歴史は次のとおりです。NetscapeNavigatorの一部のバージョンでは、サポートが追加されましたが、最終的にはFirefoxで採用されたようです。そしてある時点で、W3C Web APIワーキンググループは、location.reload()の仕様に追加することを検討する問題を取り上げました。ただし、実際に追加されることはありませんでした。 したがって、ブールパラメータはlocation.reload()の現在の仕様の一部ではありません。実際、これまでに公開されたlocation.reload()の仕様の一部にはなりませんでした。

できないって書いてある。。

こちらの記事にスーパーリロードができると堂々と書いてしまい申し訳ありませんでした。

ちなみに、英語バージョンの公式ドキュメントはこちらです。

Location公式リファレンス(英語版)

これ以上嘘情報が出回る前に、日本語版ドキュメントも修正してくれ。。

まとめ

Webページをリロードするためにはlocation.reload()を使用しましょう。

Webページをスーパーリロードするためにlocation.reload(true)使わないでください!

参考文献・おすすめ文献