228

JavaScriptを介してWebブラウザにページのハードリフレッシュを強制するにはどうすればよいですか？
ハードリフレッシュとは、ページの新しいコピーを取得し、すべての外部リソース（画像、JavaScript、CSSなど）をリフレッシュすることを意味します。

4

5 に答える 5

368

使用してみてください：

location.reload(true);

このメソッドtrueが引数として値を受け取ると、ページは常にサーバーから再ロードされます。falseまたは指定されていない場合、ブラウザはキャッシュからページをリロードする可能性があります。

より詳しい情報：

于 2010-01-20T05:17:23.427 に答える
11 
window.location.href = window.location.href
于 2019-07-16T11:10:09.433 に答える
2

角度のあるユーザーの場合、ここにあるように、次のことができます。

<form [action]="myAppURL" method="POST" #refreshForm></form>

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  // ...
})
export class FooComponent {
  @ViewChild('refreshForm', { static: false }) refreshForm;

  forceReload() {
    this.refreshForm.nativeElement.submit();
  }
}

それが機能した理由はこのウェブサイトで説明されました：https ：//www.xspdf.com/resolution/52192666.html

この記事では、すべてのフレームワークなどでハードリロードがどのように機能するかもわかります。

説明：Angular

Location：reload（）、Location.reload（）メソッドは、[更新]ボタンのように現在のURLを再読み込みします。location.reload（）;のみを使用します。ブラウザのキャッシュからではなくサーバーからすべてのリソースをリロードするために（たとえばCtrl + F5で実行されるように）強制リロードを実行する場合は、解決策ではありません。この問題の解決策は、現在の場所にPOSTリクエストを実行することです。これにより、ブラウザは常にすべてをリロードします。

于 2021-06-27T12:28:54.390 に答える
2

上記の受け入れられた答えは、今日のほとんど新しいバージョンのWebブラウザでの通常のリロード以外には何もしません。location.reload(true)最近更新したChromeで、、、、location.href = location.hrefを含むすべてを試してみました<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />。それらのどれも機能しませんでした。

私の解決策は、以下の例のように、サーバー側の機能を使用して、含まれているすべてのソースファイル参照に繰り返しのないクエリ文字列を追加することです。

<script src="script.js?t=<?=time();?>"></script>

したがって、前のファイルを保持するタイミングと更新するタイミングも動的に制御する必要があります。唯一の問題は、ファイルのインクルードがプラグインによってスクリプトを介して実行される場合、それを変更するための制御ができないことです。ソースファイルのフラッディングについて心配する必要はありません。古いファイルのリンクが解除されると、自動的にガベージコレクションされます。

于 2022-01-22T11:21:11.417 に答える
1

検索パラメータを使用して現在のURLを変更すると、ブラウザは同じパラメータをサーバーに渡します。つまり、強制的に更新されます。

（ただし、Service Workerでインターセプトを使用する場合は保証されません。）

  const url = new URL(window.location.href);
  url.searchParams.set('reloadTime', Date.now().toString());
  window.location.href = url.toString();

古いブラウザをサポートしたい場合：

if ('URL' in window) {
  const url = new URL(window.location.href);
  url.searchParams.set('reloadTime', Date.now().toString());
  window.location.href = url.toString();
} else {
  window.location.href = window.location.origin 
    + window.location.pathname 
    + window.location.search 
    + (window.location.search ? '&' : '?')
    + 'reloadTime='
    + Date.now().toString()
    + window.location.hash;
}

そうは言っても、すべてのCSSとJSを強制的に更新するのは少し面倒です。内および内のすべてのsrc属性に対してsearchParamを追加するのと同じプロセスを実行する必要があります。つまり、現在のJSはアンロードされませんが、CSSでは正常に機能します。<script>href<link>

document.querySelectorAll('link').forEach((link) => link.href = addTimestamp(link.href));

JSサンプルは問題を引き起こす可能性があるため、気にしません。

HTMLをコンパイルするときに、JSリンクとCSSリンクに検索パラメーターとしてタイムスタンプを追加することで、この手間を省くことができます。

于 2022-01-28T23:21:16.093 に答える