window.location.href = window.location.href

对于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请求到当前位置，因为这总是使浏览器重新加载所有内容。

window.location.href = window.location.href

UPDATED刷新所有外部资源(图像，JavaScript, CSS等)

把这个放到名为HardRefresh.js的文件中:

  function hardRefresh() {
    const t = parseInt(Date.now() / 10000); //10s tics
    const x = localStorage.getItem("t");
    localStorage.setItem("t", t);

    if (x != t) location.reload(true) //force page refresh from server
    else { //refreshed from server within 10s
      const a = document.querySelectorAll("a, link, script, img")
      var n = a.length
      while(n--) {
        var tag = a[n]
        var url = new URL(tag.href || tag.src);
        url.searchParams.set('r', t.toString());
        tag.href = url.toString(); //a, link, ...
        tag.src = tag.href; //rerun script, refresh img
      }
    }
  }

  window.addEventListener("DOMContentLoaded", hardRefresh);
  window.addEventListener("deviceorientation", hardRefresh, true);

这段代码对每个访问者进行完全控制的强制硬刷新，这样任何更新都不会出现兑现问题。

复制DOM渲染不是一个性能问题，因为第一次渲染来自缓存，它在<script src="js/HardRefresh.js">中停止渲染，它从服务器重新加载页面。当它运行刷新页面时，它也刷新页面中的url。

最后一次刷新时间x存储在localStorage中。与当前时间t比较，刷新时间在10秒内。假设来自服务器的负载不超过10秒，我们设法停止页面刷新循环，所以不要让它少于10秒。

对于页面的访问者，x != t是真实的，因为很久以前或第一次访问;这将从服务器获取页面。然后diff小于10s, x == t，这将使else部分添加查询字符串到href和src有源刷新。

refresh()函数可以通过按钮或其他有条件的方式调用。完全控制是通过在代码中细化url的排除和包含来管理的。

使用搜索参数更改当前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有点费力。您可能希望执行相同的过程，为<script>中的所有src属性和<link>中的href添加一个searchParam。这就是说它不会卸载当前的JS，但对CSS工作很好。

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

我不会使用JS示例，因为它可能只会导致问题。

你可以通过在编译HTML时在JS和CSS链接中添加时间戳作为搜索参数来避免这种麻烦。

这是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);