How do I fire an event when a iframe has finished loading in jQuery?

How do I fire an event when a iframe has finished loading in jQuery?

I have to load a PDF within a page.
Ideally I would like to have a loading animated gif which is replaced once the PDF has loaded.

Solutions/Answers:

Solution 1:

I’m pretty certain that it cannot be done.

Pretty much anything else than PDF works, even Flash. (Tested on Safari, Firefox 3, IE 7)

Too bad.

Solution 2:

Have you tried:

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});

Solution 3:

This did it for me (not pdf, but another “onload resistant” content):

<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
    iframe = document.getElementById("frameid");

    WaitForIFrame();

    function WaitForIFrame() {
        if (iframe.readyState != "complete") {
            setTimeout("WaitForIFrame();", 200);
        } else {
            done();
        }
    }

    function done() {
        //some code after iframe has been loaded
    }
</script>  

Hope this helps.

Solution 4:

I am trying this and seems to be working for me:
http://jsfiddle.net/aamir/BXe8C/

Bigger pdf file:
http://jsfiddle.net/aamir/BXe8C/1/

Solution 5:

$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

have you tried .ready instead?

Solution 6:

I tried an out of the box approach to this, I havent tested this for PDF content but it did work for normal HTML based content, heres how:

Step 1: Wrap your Iframe in a div wrapper

Step 2: Add a background image to your div wrapper:

.wrapperdiv{
  background-image:url(img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center; /*Can place your loader where ever you like */
}

Step 3: in ur iframe tag add ALLOWTRANSPARENCY="false"

The idea is to show the loading animation in the wrapper div till the iframe loads after it has loaded the iframe would cover the loading animation.

Give it a try.