Question

This question is not about IE caching XHR calls, I’ve tackled the caching and I get proper results (i.e. changed) from my XHR calls. However: in my XHR response, which is HTML, not only the HTML is changed, but also the image to which the HTML refers is changed. While the HTML changes properly, this image does not change, only when I completely refresh the page.

So, the XHR call itself is not cached, but the linked resources do appear to be cached. This means any solution that focuses on the XHR call does not work (like adding an extra parameter to the URL or setting headers). It seems like the browser (I’ve tried Safari and Firefox) decide to use their cache to help the XHR call with its linked resources. Indeed, the dev tools show only the transfer of the XHR, and no additional files.

How can I force the browser into properly loading (requesting) the images that come in the XHR call?

I’m using PHP server-side (also serving headers), and MooTools for handling the XHR calls. Scripts are never cached, images check for ‘if-modified’ headers (although I’ve tried never caching these as well).

Answer 1

You could run this JavaScript code on the response…

var container = document.createElement('div'),
    date = +new Date;

container.innerHTML = htmlReturnedFromXHR;

[].forEach.call(container.querySelectorAll('img[src]'), function(img) {
    img.src += '?' + date;
});

Alternatively if you had to support older browsers replace the loop from above with…

var img = container.getElementsByTagName('img');

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

MooTools code to perform above action:

var container = document.createElement('div'),
    date = +new Date
    imgs = container.getElements('img');

imgs.each(function(img) {
    img.src = img.src + '?' + date;
}