228

如何强制 Web 浏览器通过 JavaScript 对页面进行硬刷新？
硬刷新意味着获取页面的新副本并刷新所有外部资源（图像、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

您还将在本文中了解硬重载如何适用于每个框架以及更多内容

解释： 角

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

于 2021-06-27T12:28:54.390 回答
2

上面接受的答案不再做任何事情，只是在今天大多数新版本的网络浏览器上正常重新加载。我已经在我最近更新的 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>

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

于 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 有点费力。您可能想要为in和in 中的所有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 回答