Wrong content when refresh a page contains iframes

Question

In a test page 'index.html' whose content: Test link

<h2 id="at"></h2>
<div id="a"></div>
<h2 id="bt"></h2>
<div id="b"></div>
<h2 id="ct"></h2>
<div id="c"></div>
<h2 id="dt"></h2>
<div id="d"></div>

<script>
    var wraps = [document.getElementById('a'), document.getElementById('b'), document.getElementById('c'), document.getElementById('d')],
        titles = [document.getElementById('at'), document.getElementById('bt'), document.getElementById('ct'), document.getElementById('dt')],
        arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
        l,
        i,
        r;

    for (i = 0; i < 4; i++) {
        l = arr.length;
        r = Math.floor(Math.random() * l);
        titles[i].innerHTML = 'iframe ' + arr[r].toUpperCase();
        wraps[i].innerHTML = '<iframe src="' + arr[r] + '.html" frameborder="1" width="600" height="60"></iframe>';
        arr.splice(r, 1);
    }
</script>

where a-g.html are files contain sample code. When open index.html first time in IE(i test in IE 11), it displays correct content. Then refresh this page, these iframes' src attributes change, but there content don't change, just keep the same as the first time load.

This problem only exist in IE when refresh.

I found tow options to solve it:

1)add iframe to page first, then set it's src by js;

2)disable cache in http serer

But this two options are not good, I want to know is there any other way to solve the problem.

Some failed tests:

1)add random string to url

2)disable cache by adding meta tag in iframe's head

Answer 1

You can add a (pseudo) random string to the end of the URL of your iframe.

Something like this:

var randValue = (new Date()).getTime();
wraps[i].innerHTML = '<iframe src="' + arr[r] + '.html?cache=' + randValue + '" frameborder="1" width="600" height="60"></iframe>';

Updated

It seems that IE is serving the content of the iFrames out of it's cache. If you check the network panel in IE it shows a HTTP status code 304.

You might want to look at this article Internet Explorer IFRAME Browser History Lost on Reload. This might give you a possible solution to your problem.