当前页面的JavaScript硬刷新

Question

如何强制Web浏览器通过JavaScript对页面进行硬刷新？
硬刷新意味着获取页面的新副本并刷新所有外部资源(图像,JavaScript,CSS等).

Answer 1

尝试使用:

location.reload(true);

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

更多信息:

• 位置对象

Answer 2

window.location.href = window.location.href

Answer 3

上面接受的答案除了在当今大多数新版本的网络浏览器上正常重新加载之外不再执行任何操作。我已经在最近更新的 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 4

这是 2022 年的更新，有 2 种方法，考虑到 SPA 的#URL：

方法一：

正如其他答案中提到的，一种解决方案是将随机参数放入查询字符串中。在 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 中，它对用户来说可能看起来有点难看。

方法二：

借鉴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 结合使用，但我认为使用 headers 就足够了：

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

Answer 5

使用搜索参数更改当前 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 链接中添加时间戳作为搜索参数来避免这种麻烦。