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

Question

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

User · Answer

I had to show a loader while pdf in iFrame is loading so what i come up with:

    loader({href:'loader.gif', onComplete: function(){
            $('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
    }
    });

I'm showing a loader. Once I'm sure that customer can see my loader, i'm calling onCompllet loaders method that loads an iframe. Iframe has an "onLoad" event. Once PDF is loaded it triggers onloat event where i'm hiding the loader :)

The important part:

iFrame has "onLoad" event where you can do what you need (hide loaders etc.)

User · Answer

Using both jquery Load and Ready neither seemed to really match when the iframe was TRULY ready   I ended up doing something like this      iframe   ready function              loader   fadeOut 2500  function  sender              sender  remove                  Where  loader is an absolutely positioned div over top the iframe with a spinner gif

User · Answer

Have you tried       iFrameId   on  load   function             do something once the iframe is loaded

User · Answer

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

User · Answer

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

User · Answer

Here is what I do for any action and it works in Firefox  IE  Opera  and Safari    lt script type  text javascript  gt      document  ready function        doMethod            function actionIframe iframe              do what ever           function doMethod              var iFrames   document getElementsByTagName  iframe            what ever action you want      function iAction                  Iterate through all iframes in the page        for  var i   0  j   iFrames length  i  lt  j  i                    actionIframe iFrames i                          Check if browser is Safari or Opera      if    browser safari      browser opera                 Start timer when loaded           iframe   load function                   setTimeout iAction  0                              Safari and Opera need something to force a load        for  var i   0  j   iFrames length  i  lt  j  i                     var iSource   iFrames i  src           iFrames i  src                iFrames i  src   iSource                    else                For other good browsers           iframe   load function                   actionIframe this                               lt  script gt

User · Answer

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

User · Answer

Alex aw that s a bummer  What if in your iframe you had an html document that looked like    lt html gt     lt head gt       lt meta http-equiv  refresh  content  0 url  pdfs somepdf pdf    gt     lt  head gt     lt body gt     lt  body gt   lt  html gt    Definitely a hack  but it might work for Firefox  Although I wonder if the load event would fire too soon in that case

User · Answer

If you can expect the browser s open save interface to pop up for the user once the download is complete  then you can run this when you start the download      document   blur  function             Your code here          When the dialogue pops up on top of the page  the blur event will trigger

User · Answer

This did it for me  not pdf  but another  onload resistant  content      lt iframe id  frameid  src  page aspx  gt  lt  iframe gt   lt script language  javascript  gt      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        lt  script gt      Hope this helps

User · Answer

iFrameId   ready function            do something once the iframe is loaded       have you tried  ready instead

User · Answer

Since after the pdf file is loaded  the iframe document will have a new DOM element  lt embed  gt   so we can do the check like this       window onload   function              creating an iframe element     var ifr   document createElement  iframe        document body appendChild ifr           making the iframe fill the viewport     ifr width     100        ifr height   window innerHeight          continuously checking to see if the pdf file has been loaded      self interval   setInterval function              if  ifr  amp  amp  ifr contentDocument  amp  amp  ifr contentDocument readyState      complete   amp  amp  ifr contentDocument embeds  amp  amp  ifr contentDocument embeds length  gt  0                clearInterval self interval                console log  loaded                  You can do print here  ifr contentWindow print                     100         ifr src   src

User · Answer

The solution I have applied to this situation is to simply place an absolute loading image in the DOM  which will be covered by the iframe layer after the iframe is loaded   The z-index of the iframe should be  loading s z-index   1   or just higher   For example    loading-image   position  absolute  z-index  0     iframe-element   position  relative  z-index  1      Hope this helps if no javaScript solution did  I do think that CSS is best practice for these situations   Best regards

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

Examples related to javascript

Examples related to jquery