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