使用JavaScript强制“清空缓存并硬性重新加载”

Question

使用JavaScript强制“清空缓存并硬性重新加载”

7

有很多类似的问题，但答案与我看到的不同。

在Chrome中，我看到以下情况：

服务器上进行更改并通过AJAX / JavaScript通知客户端刷新页面。客户端JS尝试使用location.reload(true)。它会刷新，但页面没有变化。我还包括了以下内容：

window.applicationCache.swapCache();
location.reload(true);

这并没有起到作用，applicationCache 已经被认为是过时的。

然后我尝试使用修改后的URL（附加了?id=122）刷新页面，但它没有正确地刷新。

我手动尝试了F5和Control-F5。同样，没有任何变化。

在谷歌浏览器的开发者模式下，我手动选择了“正常刷新”和“硬刷新”，但没有任何变化。只有当我手动选择“清空缓存并强制重新加载”时，更新后的页面才会正确显示。

如何在客户端JS中以编程方式强制使用“清空缓存并强制重新加载”刷新页面？

- George Hernando

你确定修改的内容在URL中指定的文件里吗？也许它实际上在其他资源文件中，比如.js或.css文件中被加载了。 - Barmar

1

缓存破坏通过修改资源的URL而不是页面来实现。例如：您可以在js或css文件的url中添加“?ver=123456”来破坏缓存，但这不适用于主要的.html页面。 - Steven Stark

我认为 javascript 无法控制浏览器缓存，也不明白为什么它应该这样做。但如果您想在将来解决此问题，可以尝试在服务器端更改 Cache-Control 标头。 - Andrej

@Andrej - 根据文档的说明，它可以。 - Jaromanda X

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ClosDesign · Answer 1

虽然这是一个旧帖子，但我发现最好的方法是使用缓存破坏。因为Chrome会缓存所有内容以节省资源并试图比你更聪明，所以通常可以通过添加“?ver=1234”（递增）或将数据附加到JS和CSS引用的末尾来使用缓存破坏。是的，这不是最好的方法，因为它会在每次加载资源时都重新加载，而且不允许用户缓存，这意味着每个启用了缓存破坏的页面加载时间略长。
但它确实有效。您可以通过手动使用递增器、JS或您选择的服务器端代码将“?ver=XXXOrWhateverHere”添加到JS/CSS引用中。

您的引用可能看起来像这样。

<script type="text/javascript" src="//example.com/scripts/MyFile.js?ver=12345"></script>

或者如果您想通过Javascript添加它（同样只有一种方式），则可能看起来像这样

 <script type="text/javascript">
 var newDate = new Date();
 var AddJsToHead = document.createElement('script');
 AddJsToHead.type = 'text/javascript';
 AddJsToHead.src = 'https://example.com/scripts/myfile.js?v=' + 
 newDate.getUTCMilliseconds(); 
 document.head.appendChild(AddJsToHead);
 </script>