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

Question

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

这是我在 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”，但没有任何变化。直到我手动选择“清空缓存和硬重新加载”才能正确显示更新的页面。

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

Answer 1

老线程，但自从 Chrome 缓存所有内容以节省资源并尝试比你更聪明以来，我发现的最好方法是使用缓存清除。通常可以通过添加“?ver=1234”（增量）或将数据附加到 JS 和 CSS 引用的引用末尾来使用。是的，它不是最好的，因为它每次都会加载资源并且不允许用户缓存，这意味着每个具有缓存清除的页面的加载时间稍长。
但它确实有效。您可以通过 JS 或您选择的服务器端代码手动使用增量器到 JS/CSS 参考，方法是添加“?ver=XXXOrWhateverHere”

您的参考可能看起来像这样。

<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>