如何通过JavaScript强制web浏览器对页面进行硬刷新? 硬刷新意味着获取页面的新副本,并刷新所有外部资源(图像、JavaScript、CSS等)。
当前回答
上面接受的答案不再做任何事情,除了在大多数新版本的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 = < ?> > < /脚本”>
因此,您还需要动态地控制何时保留以前的文件,何时更新它。唯一的问题是,当文件包含通过脚本由插件执行时,你无法控制修改它。不要担心源文件泛滥。当旧文件被解除链接时,它将自动被垃圾收集。
其他回答
⚠️此解决方案并不适用于所有浏览器。location.reload()的MDN页面: 注意:Firefox支持location.reload()的非标准forceGet布尔参数,它告诉Firefox绕过缓存并强制重载当前文档。但是,在所有其他浏览器中,您在location.reload()调用中指定的任何参数都将被忽略,并且没有任何类型的影响。
Try:
location.reload(true);
当此方法接收到一个真值作为参数时,它将导致页面总是从服务器重新加载。如果为false或未指定,浏览器可能会从缓存中重新加载页面。
更多信息:
location对象
window.location.href = window.location.href
这是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);
上面接受的答案不再做任何事情,除了在大多数新版本的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 = < ?> > < /脚本”>
因此,您还需要动态地控制何时保留以前的文件,何时更新它。唯一的问题是,当文件包含通过脚本由插件执行时,你无法控制修改它。不要担心源文件泛滥。当旧文件被解除链接时,它将自动被垃圾收集。
我发现的最可靠的方法是通过向查询字符串添加值来使用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会更改。在大多数应用程序中,这并不重要,但如果服务器依赖于特定的参数,这可能会导致潜在的副作用。
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔