IE8 reloads dynamic iframe content from cache into the wrong iframe

Question

I have a page with multiple iframes on it. Each iframe is invoking some javascript which dynamically writes new iframes into the parent window's document.

This works fine on first page load. But if the page is refreshed in IE8 (and earlier) one of the dynamically generated iframes will get loaded from cache into one of the hard-coded slots on the parent page. See the following example:

http://www.risingspiral.com/ie8-iframe-refresh/

On refresh in IE8 (may take a couple tries) the Spot 2_ will get loaded from cache into spot3.html's iframe. spot3.html will not get called at all.

I've already protected against the IE dynamic iframe refresh issue described here:

http://buildingonmud.blogspot.com/2010/06/ie-iframe-refresh-and-back-button.html

But there still seems to be a problem. It's also interesting that the problem always seems to occur (at least for me) between the iframes spot2.html and spot3.html.

I've tried a ton of different configurations to try and get around this issue. So, I'm hunting for new suggestions.

Any ideas?

Answer 1

I run into very similar problem where dynamically generated iframe after once loaded gets stuck on the first src and even if the parent page changes the iframe's src attribute on every reload, the iframe still loads the first one.

After fighting with this for several hours, I figured out that this is just < IE8 refresh bug, and if the page is navigated to using link or through entering a URL into the Address bar, everything works as expected. So as long as you don't refresh the page, or refresh it by entering the address again, you should be fine.

---

Update:

The problem seems to be overcome by setting the SRC attribute of the iframe again, like

 iframe.src = iframe.src;

This seems to force < IE8 to actually respect the given URL.

Answer 2

Old question but the problem is still there. I am facing it right now. The problem is that i can't control when the iframe will be loaded because it is generated by a script inserted in page asyncrhonously.

After some hacks I choosed to refresh frames after a timeout. This is the best solution i found.

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
   var ieversion=new Number(RegExp.$1);
   if (ieversion<=8){
        setTimeout(function(){
              iframeReload();
        }, 1000);

        function iframeReload() {
            $("iframe").each(function(index) {
                $(this)[0].src = $(this)[0].src;
            });
        }
   }
}

Answer 3

I had the same issue and fixed it by creating the iframe with a different ID everytime (only tested on IE11, but hopefully this should solve the problem on all versions):

iframe.id = iframe.name = "iframe$" + Math.floor(Math.random() * new Date().getTime());

Note that setting the name might not have any effect (to be tested; I can only tell that setting the name only does not solve the problem)