防止在 XHR 调用中缓存链接的资源


Prevent caching linked resources within XHR calls

这个问题不是关于IE缓存XHR调用,我已经解决了缓存,并且从我的XHR调用中得到了正确的结果(即更改)。但是:在我的XHR响应中,即HTML,不仅HTML被更改,而且HTML引用的图像也发生了变化。虽然 HTML 正确更改,但此图像不会更改,只有当我完全刷新页面时。

因此,XHR 调用本身不会被缓存,但链接的资源似乎已被缓存。这意味着任何专注于 XHR 调用的解决方案都不起作用(例如向 URL 添加额外参数或设置标头)。似乎浏览器(我已经尝试过 Safari 和 Firefox)决定使用它们的缓存来帮助 XHR 调用其链接的资源。事实上,开发工具只显示 XHR 的传输,而不显示其他文件。

如何强制浏览器正确加载(请求)XHR 调用中的图像?

我正在使用PHP服务器端(也提供标头)和MooTools来处理XHR调用。脚本永远不会被缓存,图像检查"if-modified"标头(尽管我也尝试过从不缓存这些标头)。

你可以在响应上运行这个 JavaScript 代码...

var container = document.createElement('div'),
    date = +new Date;
container.innerHTML = htmlReturnedFromXHR;
[].forEach.call(container.querySelectorAll('img[src]'), function(img) {
    img.src += '?' + date;
});

或者,如果您必须支持较旧的浏览器,请将上面的循环替换为...

var img = container.getElementsByTagName('img');
for (i = 0, length = img.length; i < length; i++) {
    img[i].src += '?' + date;
}

用于执行上述操作的 MooTools 代码:

var container = document.createElement('div'),
    date = +new Date
    imgs = container.getElements('img');
imgs.each(function(img) {
    img.src = img.src + '?' + date;
}