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.

Answer 2

One easy solution would be to simply use Google Viewer for the PDF instead. Not only does this show the PDF, but the onLoad property will undoubtedly work. Google Viewer: https://docs.google.com/viewer I should also note that the proper way of embedding PDFs on a webpage is with the embed tag, not an iframe. Perhaps, you could try using onreadystatechange event instead?

Answer 3

Use jquery For this.

Var iframe= $(""); iframe.attr( .... )

$("#content").html(iframe); iframe.load(myFunction);