onload event for dynamically created iframe never fires in IE

Question

I have an issue with IE where the iframe's "onload/load" events will not fire when I dynamically create the iframe, set its source to a pdf and append it to the document.

The reason I need to listen for the event is because I need to hide the iframe until the frame has loaded and then use some effects to fade it into view.

I've got this to work in every browser I've tested in (Chrome, Firefox, Safari, mobile Safari), but it will not work in IE8->IE11.

I've seen lots of posts about how IE doesn't fire the onload event, and from what I've gathered, the following should be working:

// listen for when the iframe's content has been loaded...
if (window.addEventListener)
    iframe.addEventListener("load", framedContentLoaded, false);
else if (window.attachEvent)
    iframe.attachEvent("onload", framedContentLoaded);
else
    iframe.onload = framedContentLoaded;

However, my function framedContentLoaded never gets fired in IE.

I've created a fiddle that reproduces the issue: http://jsfiddle.net/s5TUU/

Answer 1

I had the same issue, I was using browser detection and onreadystatechange event to cater for IE but then it stopped working for IE11.

This bug has been reported and there is a workaround mentioned.

The workaround is to put the pdf into an html page with an iframe and then load that html page into your primary iframe. You will have nested iframes, it's not pretty but it seems to play well with IE. You will use an onload event which makes it a cross browser solution. You will need to make the parent and child iframes the same size and disable scrollbars on the parent iframe so you don't get double scrollbars.

In my case I was using ASP.Net MVC, I was setting my parent iframe src to call a controller action with the pdf url passed as a url parameter. The action was returning a view with the child iframe with the pdf assigned to its src.