从 Javascript 强制“空缓存和硬重新加载”答案

【问题标题】：Force "Empty Cache and Hard Reload" from Javascript从 Javascript 强制“空缓存和硬重新加载”
【发布时间】：2019-09-03 17:45:28
【问题描述】：

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

这是我在 Chrome 中看到的：

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

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

这没有帮助，applicationCache 应该被弃用。

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

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

在 Google Chrome 的开发者模式下，我手动选择了“Normal Relaod”和“Hard Reload”，但没有任何变化。直到我手动选择“Empty Cache and Hard Reload”，更新的页面才能正确显示。

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

【问题讨论】：

您确定更改是在 URL 中命名的文件中吗？也许它实际上是在其他一些资源中，比如它加载的.js 或.css 文件。
chache busting 通过修改资源的 url 而不是页面来工作。示例：您的 js 或 css 可以通过在 js 或 css 文件的 url 中添加 ?ver=123456 来清除缓存，但这不适用于 .html 主页面。
我不认为 javascript 可以控制网络浏览器缓存，我不明白为什么应该这样做。但是如果你以后想摆脱这个问题，也许你可以尝试在服务器端更改Cache-Control 标头。
@Andrej - 根据documentaion 可以

标签： javascript google-chrome

【解决方案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>

【讨论】：