IE dynamic image caching issue?

Question

I have an html page that is loading multiple iframes into which are embedded dynamic images created from a Tomcat server page (.jsp). This works as expected from Chrome and Firefox, but for some reason IE displays all of the images the same (as the first image). I've created an example:

http://coupondiscounts.com/jsImageTest.html

jsImageTest.html -- This page simply loads 6 instances of the testImageFrame.html page in separate iframes one-at-a-time, using Javascript.
testImageFrame.html -- This is the page loaded in all the iframes. It contains only a JavaScript block that writes out the current time and an img tag. The img is dynamically generated by a .jsp page on a different server. It should be a white box on a black background. In the box are the current time (from the Tomcat server using Java) and a randomly created double between 0 & 1.

What happens (in IE): The page almost instantly loads four identical iframes. Depending on the speed of your machine, the JavaScript times may vary by a second or two. The images' times will all be the same as will be the random number. This holds true even for the last two iframes which are loaded 5 and 10 seconds after the others (using JavaScript setTimeout()).
What should happen (as it does in Chrome and FF): The page loads the same 4 iframes, but the random numbers in the images will be different. The times in the images occasionally span a second as well.

Anyone have a clue as to what's going on here? Is IE doing some strange caching? The image header has "no-cache," "no-store" and all that. I've tried it on IE6 and 7. You can use the "Next" button to create another iframe. In IE, the images are always the same.

Notes: I don't really need iframes, just the images, but if I only use img tags, the problem appears in Chrome and FF as well. I also don't really need to load these iframes dynamically, I was just trying to abstract the issue further and allow a delayed load for the latter 2 images.

Answer 1

Pass a cache breaking variable, or set a no-cache header.

IE (no pun intended)

<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

Answer 2

MSIE is terrific when it comes to caching. The problem here is that it doesn't adhere the caching instructions as specified in the headers of the "parent" HTML page from where the JS code is executed.

Your particular issue can be solved by adding a timestamp to the query string.

ifr.src = 'testImageFrame.html?' + new Date().getTime();

This forces MSIE to fire a brand new GET request from JS on.