如何通过JavaScript强制web浏览器对页面进行硬刷新?
硬刷新意味着获取页面的最新副本,并刷新所有外部资源(图像、JavaScript、CSS等)。
发布于 2019-07-16 19:10:09
window.location.href = window.location.href
发布于 2022-01-22 11:21:11
上面接受的答案不再做任何事情,除了在今天大多数新版本的web浏览器上正常的重新加载。我已经在我最近更新的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-28 23:21:16
使用搜索参数更改当前URL将导致浏览器将该参数传递给服务器,换言之,这将强制刷新。
(但是,如果您将intercept与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链接中添加时间戳作为搜索参数,可以省去这方面的麻烦。
https://stackoverflow.com/questions/2099201
复制相似问题