javascript - 仅在浏览器(IE)中禁用图像缓存

Question

我们正在构建一个单页应用程序(dojo)，它将所有内容下载到本地存储和浏览器缓存(IE)。我们正在将 JSON 文件(数据)推送到本地存储和 indexedDB 。在 Chrome 和 Firefox 中下载所有数据，但在 IE 中下载部分数据。在IE浏览器中，缓存限制设置为10MB。我们还看到图像被下载到临时文件夹。当我们将缓存和数据库中允许的限制增加到更高的值时，所有数据都会被下载。

我们预测该问题可能是由于图像被下载到临时文件夹所致。由于我们不允许增加缓存限制，因为它需要在组织级别进行更改，因此我们必须在代码中进行管理.如何禁止将图像下载到 html 页面中的浏览器缓存(临时文件夹)？或者我们有其他方法可以处理这个问题吗？

Answer 1

将随机生成的查询字符串添加到每个图像请求中。

带有查询字符串的图像示例:

<img src="image.png?8484744" />

这将阻止浏览器在本地缓存图像。

这里是一个使用 dojo 在 src 上为所有图像添加动态创建的查询字符串的脚本。

实时示例(请检查 dom 以查看查询字符串):

https://jsfiddle.net/haw785rs/

require(['dojo/query', 'dojo/dom-attr'], function(query, domAttr) {
  var images = query('img');
  images.forEach(function(item) {
    domAttr.set(item, 'src', item.src + '?' + Date.now());
  });
})

<小时/>

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">

<小时/>

您还可以在服务器端强制执行此行为，确保您的图像随 header 一起传送

缓存控制:max-age=0，必须重新验证

(我建议您将服务器方法与动态查询字符串一起使用)。