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

Question

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

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

如何强制浏览器正确加载（请求）来自 XHR 调用的图像？

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

Answer 1

您可以在响应上运行此 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;
}