JavaScript 硬刷新当前页面

Question

如何强制网络浏览器通过 JavaScript 硬刷新页面？
硬刷新意味着获取页面的新副本并刷新所有外部资源（图像、JavaScript、CSS 等）。

Answer 1

上面接受的答案不再做任何事情，只是在当今大多数新版本的网络浏览器上正常重新加载。我已经在我最近更新的 Chrome 上尝试了所有这些，包括 location.reload(true)、location.href = location.href 和 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />。他们都没有工作。

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

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

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

Answer 2

使用搜索参数更改当前 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> 和<link> 中的src 和href 中的所有src 属性执行相同的过程。也就是说，它不会卸载当前的 JS，但对 CSS 可以正常工作。

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

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

在编译 HTML 时，您可以通过在 JS 和 CSS 链接中添加时间戳作为搜索参数来省去这个麻烦。

Answer 3

对于 Angular 用户和 here，您可以执行以下操作：

<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，就像刷新按钮一样。仅使用 location.reload();如果您想执行强制重新加载（如使用 Ctrl + F5 完成）以便从服务器而不是浏览器缓存重新加载所有资源，这不是一个解决方案。这个问题的解决方案是，对当前位置执行 POST 请求，因为这总是会让浏览器重新加载所有内容。

Answer 4

window.location.href = window.location.href

Answer 5

尝试使用：

location.reload(true);

当此方法接收到 true 值作为参数时，它将导致页面始终从服务器重新加载。如果为 false 或未指定，浏览器可能从其缓存中重新加载页面。

更多信息：

• The location object