javascript - 从 Javascript 强制 "Empty Cache and Hard Reload"

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”，但没有任何变化。直到我手动选择“Empty Cache and Hard Reload”，更新的页面才能正确显示。

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

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>