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.


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");


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

    function done() {
        //some code after iframe has been loaded

Hope this helps.

Solution 4:

I am trying this and seems to be working for me:

Bigger pdf file:

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:

  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.