如何通过JavaScript强制web浏览器对页面进行硬刷新? 硬刷新意味着获取页面的新副本,并刷新所有外部资源(图像、JavaScript、CSS等)。
当前回答
使用搜索参数更改当前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>中的所有src属性和<link>中的href添加一个searchParam。这就是说它不会卸载当前的JS,但对CSS工作很好。
document.querySelectorAll('link').forEach((link) => link.href = addTimestamp(link.href));
我不会使用JS示例,因为它可能只会导致问题。
你可以通过在编译HTML时在JS和CSS链接中添加时间戳作为搜索参数来避免这种麻烦。
其他回答
⚠️此解决方案并不适用于所有浏览器。location.reload()的MDN页面: 注意:Firefox支持location.reload()的非标准forceGet布尔参数,它告诉Firefox绕过缓存并强制重载当前文档。但是,在所有其他浏览器中,您在location.reload()调用中指定的任何参数都将被忽略,并且没有任何类型的影响。
Try:
location.reload(true);
当此方法接收到一个真值作为参数时,它将导致页面总是从服务器重新加载。如果为false或未指定,浏览器可能会从缓存中重新加载页面。
更多信息:
location对象
使用搜索参数更改当前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>中的所有src属性和<link>中的href添加一个searchParam。这就是说它不会卸载当前的JS,但对CSS工作很好。
document.querySelectorAll('link').forEach((link) => link.href = addTimestamp(link.href));
我不会使用JS示例,因为它可能只会导致问题。
你可以通过在编译HTML时在JS和CSS链接中添加时间戳作为搜索参数来避免这种麻烦。
window.location.href = window.location.href
我发现的最可靠的方法是通过向查询字符串添加值来使用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会更改。在大多数应用程序中,这并不重要,但如果服务器依赖于特定的参数,这可能会导致潜在的副作用。
上面接受的答案不再做任何事情,除了在大多数新版本的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 = < ?> > < /脚本”>
因此,您还需要动态地控制何时保留以前的文件,何时更新它。唯一的问题是,当文件包含通过脚本由插件执行时,你无法控制修改它。不要担心源文件泛滥。当旧文件被解除链接时,它将自动被垃圾收集。
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期