Javascript callback when IFRAME is finished loading

Question

I need to execute a callback when an IFRAME has finished loading  I have no control over the content in the IFRAME  so I can t fire the callback from there   This IFRAME is programmaticly created  and I need to pass its data as a variable in the callback  as well as destroy the iframe   Any ideas   EDIT   Here is what I have now   function xssRequest url  callback        var iFrameObj   document createElement  IFRAME        iFrameObj src   url                  document body appendChild iFrameObj             iFrameObj  load function                  document body removeChild iFrameObj           callback iFrameObj innerHTML               This callsback before the iFrame has loaded  so the callback has no data returned

User · Answer

I am using jQuery and surprisingly this seems to load as I just tested and loaded a heavy page and I didn't get the alert for a few seconds until I saw the iframe load:

$('#the_iframe').load(function(){
    alert('loaded!');
});

So if you don't want to use jQuery take a look at their source code and see if this function behaves differently with iframe DOM elements, I will look at it myself later as I am interested and post here. Also I only tested in the latest chrome.

User · Answer

First up  going by the function name xssRequest it sounds like you re trying cross site request - which if that s right  you re not going to be able to read the contents of the iframe   On the other hand  if the iframe s URL is on your domain you can access the body  but I ve found that if I use a timeout to remove the iframe the callback works fine      possibly excessive use of jQuery - but I ve got a live working example in production     myUniqueID   load function        if  typeof callback     function         callback    body   this contentWindow document  html           setTimeout function         frameId   remove      50

User · Answer

I wanted to hide the waiting spinner div when the i frame content is fully loaded on IE  i tried literally every solution mentioned in Stackoverflow Com  but with nothing worked as i wanted   Then i had an idea  that when the i frame content is fully loaded  the   Window   load event might be fired  And that exactly what happened  So  i wrote this small script  and worked like magic          window  load function             alert  Done window ready          var lblWait   document getElementById  lblWait         if  lblWait    null              lblWait style visibility    false            document getElementById  divWait   style display    none                 Hope this helps

User · Answer

Using onload attrbute will solve your problem   Here is an example     x000D   x000D  function a     x000D  alert  Your iframe has been loaded    x000D    x000D   lt iframe src  https   stackoverflow com  onload  a    gt  lt  iframe gt  x000D   x000D   x000D    Is this what you want   Click here for more information

User · Answer

I think the load event is right   What is not right is the way you use to retreive the content from iframe content dom   What you need is the html of the page loaded in the iframe not the html of the iframe object   What you have to do is to access the content document with iFrameObj contentDocument  This returns the dom of the page loaded inside the iframe  if it is on the same domain of the current page   I would retreive the content before removing the iframe   I ve tested in firefox and opera   Then i think you can retreive your data with   childDom  html   or   childDom  find  some selector

User · Answer

I ve had exactly the same problem in the past and the only way I found to fix it was to add the callback into the iframe page  Of course that only works when you have control over the iframe content

User · Answer

The innerHTML of your iframe is blank because your iframe tag doesn t surround any content in the parent document  In order to get the content from the page referred to by the iframe s src attribute  you need to access the iframe s contentDocument property  An exception will be thrown if the src is from a different domain though  This is a security feature that prevents you from executing arbitrary JavaScript on someone else s page  which would create a cross-site scripting vulnerability  Here is some example code the illustrates what I m talking about    lt script src  http   prototypejs org assets 2009 8 31 prototype js  type  text javascript  gt  lt  script gt    lt h1 gt Parent lt  h1 gt    lt script type  text javascript  gt  function on load iframe      try          Displays the first 50 chars in the innerHTML of the        body of the page that the iframe is showing         EDIT 2012-04-17  for wider support  fallback to contentWindow document     var doc   iframe contentDocument    iframe contentWindow document      alert doc body innerHTML substring 0  50        catch  e           This can happen if the src of the iframe is        on another domain     alert  exception      e          lt  script gt   lt iframe id  child  src  iframe content html  onload  on load this   gt  lt  iframe gt    To further the example  try using this as the content of the iframe    lt h1 gt Child lt  h1 gt    lt a href  http   www google com   gt Google lt  a gt    lt p gt Use the preceeding link to change the src of the iframe to see what happens when the src domain is different from that of the parent page lt  p gt

User · Answer

I have had to do this in cases where documents such as word docs and pdfs were being streamed to the iframe and found a solution that works pretty well  The key is handling the onreadystatechanged event on the iframe   Lets say the name of your frame is  myIframe   First somewhere in your code startup  I do it inline any where after the iframe  add something like this to register the event handler   document getElementById  myIframe   onreadystatechange   MyIframeReadyStateChanged    I was not able to use an onreadystatechage attribute on the iframe  I can t remember why  but the app had to work in IE 7 and Safari 3  so that may of been a factor   Here is an example of a how to get the complete state   function MyIframeReadyStateChanged         if document getElementById  myIframe   readyState     complete                    Do your complete stuff here

User · Answer

I had a similar problem as you  What I did is that I use something called jQuery  What you then do in the javascript code is this     function      this is regular jQuery code  It waits for the dom to load fully the first time you open the page           myIframeId   load function           callback     myIframeId   html                myIframeId   remove                    It seems as you delete you iFrame before you grab the html from it  Now  I do see a problem with that  p  Hope this helps

User · Answer

I have a similar code in my projects that works fine  Adapting my code to your function  a solution could be the following   function xssRequest url  callback        var iFrameObj   document createElement  IFRAME        iFrameObj id    myUniqueID       document body appendChild iFrameObj              iFrameObj src   url                                 iFrameObj  load function                  callback window  myUniqueID   document body innerHTML           document body removeChild iFrameObj               Maybe you have an empty innerHTML because  one or both causes     1  you should use it against the body element   2  you have removed the iframe from the your page DOM

User · Answer

I have a similar code in my projects that works fine  Adapting my code to your function  a solution could be the following   function xssRequest url  callback        var iFrameObj   document createElement  IFRAME        iFrameObj id    myUniqueID       document body appendChild iFrameObj              iFrameObj src   url                                 iFrameObj  load function                  callback window  myUniqueID   document body innerHTML           document body removeChild iFrameObj               Maybe you have an empty innerHTML because  one or both causes     1  you should use it against the body element   2  you have removed the iframe from the your page DOM

User · Answer

I have had to do this in cases where documents such as word docs and pdfs were being streamed to the iframe and found a solution that works pretty well  The key is handling the onreadystatechanged event on the iframe   Lets say the name of your frame is  myIframe   First somewhere in your code startup  I do it inline any where after the iframe  add something like this to register the event handler   document getElementById  myIframe   onreadystatechange   MyIframeReadyStateChanged    I was not able to use an onreadystatechage attribute on the iframe  I can t remember why  but the app had to work in IE 7 and Safari 3  so that may of been a factor   Here is an example of a how to get the complete state   function MyIframeReadyStateChanged         if document getElementById  myIframe   readyState     complete                    Do your complete stuff here

User · Answer

First up  going by the function name xssRequest it sounds like you re trying cross site request - which if that s right  you re not going to be able to read the contents of the iframe   On the other hand  if the iframe s URL is on your domain you can access the body  but I ve found that if I use a timeout to remove the iframe the callback works fine      possibly excessive use of jQuery - but I ve got a live working example in production     myUniqueID   load function        if  typeof callback     function         callback    body   this contentWindow document  html           setTimeout function         frameId   remove      50

[javascript] Javascript callback when IFRAME is finished loading?

Examples related to javascript

Examples related to events

Examples related to dom

Examples related to iframe