我发现的最可靠的方法是通过向查询字符串添加值来使用chache buster。

下面是我常用的一个常规程序:

    function reloadUrl() {

        // cache busting: Reliable but modifies URL
        var queryParams = new URLSearchParams(window.location.search);
        queryParams.set("lr", new Date().getTime());        
        var query = queryParams.toString();                
        window.location.search = query;  // navigates
    }

调用这个函数会产生如下结果:

https://somesite.com/page?lr=1665958485293

重载后。

这可以强制每次重新加载，但需要注意的是URL会更改。在大多数应用程序中，这并不重要，但如果服务器依赖于特定的参数，这可能会导致潜在的副作用。

上面接受的答案不再做任何事情，除了在大多数新版本的web浏览器上正常重新加载。我已经在我最近更新的Chrome上尝试了所有这些，包括location.reload(true)， location。Href = location。/>. href, and <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"没有一个成功。

我的解决方案是通过使用服务器端功能将非重复查询字符串附加到所有包含的源文件引用，如下例所示。

< src = "脚本。js脚本吗? =时间();t = < ?> > < /脚本”>

因此，您还需要动态地控制何时保留以前的文件，何时更新它。唯一的问题是，当文件包含通过脚本由插件执行时，你无法控制修改它。不要担心源文件泛滥。当旧文件被解除链接时，它将自动被垃圾收集。

对于angular用户，你可以执行以下操作:

<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

在本文中，您还将了解到硬重载是如何为每个框架工作的

解释:角

Location: reload()， Location.reload()方法重载当前URL，就像Refresh按钮一样。只使用location.reload();如果你想执行强制重载(例如使用Ctrl + F5)来重载服务器而不是浏览器缓存中的所有资源，这不是一个解决方案。这个问题的解决方案是，执行一个POST请求到当前位置，因为这总是使浏览器重新加载所有内容。

这是2022年的更新，有2种方法，考虑到url中有#的SPA:

方法1:

正如在其他答案中提到的，一种解决方案是将一个随机参数放入查询字符串。在javascript中，它可以这样实现:

function urlWithRndQueryParam(url, paramName) {
    const ulrArr = url.split('#');
    const urlQry = ulrArr[0].split('?');
    const usp = new URLSearchParams(urlQry[1] || '');
    usp.set(paramName || '_z', `${Date.now()}`);
    urlQry[1] = usp.toString();
    ulrArr[0] = urlQry.join('?');
    return ulrArr.join('#');
}

function handleHardReload(url) {
    window.location.href = urlWithRndQueryParam(url);
    // This is to ensure reload with url's having '#'
    window.location.reload();
}

handleHardReload(window.location.href);

坏的部分是，它改变了当前的url，有时，在干净的url，它可能看起来有点难看的用户。

方法2:

从https://splunktool.com/force-a-reload-of-page-in-chrome-using-javascript-no-cache的想法来看，这个过程可以是先获得没有缓存的url，然后重新加载页面:

async function handleHardReload(url) {
    await fetch(url, {
        headers: {
            Pragma: 'no-cache',
            Expires: '-1',
            'Cache-Control': 'no-cache',
        },
    });
    window.location.href = url;
    // This is to ensure reload with url's having '#'
    window.location.reload();
}

handleHardReload(window.location.href);

甚至可以结合方法1，但我认为与头应该足够:

async function handleHardReload(url) {
    const newUrl = urlWithRndQueryParam(url);
    await fetch(newUrl, {
        headers: {
            Pragma: 'no-cache',
            Expires: '-1',
            'Cache-Control': 'no-cache',
        },
    });
    window.location.href = url;
    // This is to ensure reload with url's having '#'
    window.location.reload();
}

handleHardReload(window.location.href);

window.location.href = window.location.href

我发现的最可靠的方法是通过向查询字符串添加值来使用chache buster。

下面是我常用的一个常规程序:

    function reloadUrl() {

        // cache busting: Reliable but modifies URL
        var queryParams = new URLSearchParams(window.location.search);
        queryParams.set("lr", new Date().getTime());        
        var query = queryParams.toString();                
        window.location.search = query;  // navigates
    }

调用这个函数会产生如下结果:

https://somesite.com/page?lr=1665958485293

重载后。

这可以强制每次重新加载，但需要注意的是URL会更改。在大多数应用程序中，这并不重要，但如果服务器依赖于特定的参数，这可能会导致潜在的副作用。