Detecting when Iframe content has loaded Cross browser

Question

I m trying to detect when an iframe and its content have loaded but not having much luck  My application takes some input in text fields in the parent window and updates the iframe to provide a  live preview   I started with the following code  YUI  to detect when the iframe load event occurs    E on  preview-pane    load   function        previewBody      preview-pane   contentWindow document getElementsByTagName  body   0        preview-pane  is the ID of my iframe and I m using YUI to attach the event handler  However  trying to access the body in my callback  upon iframe load  fails  I think because the iframe loads before the event handler is ready  This code works if I delay the iframe loading by making the php script that generates it sleep   Basically  I m asking what is the correct approach across browsers to detect when the iframe has loaded and its document is ready

User · Answer

For anyone using Ember  this should work as expected    lt iframe onLoad   action  actionName     frameborder  0  src   iframeSrc     gt

User · Answer

See this blog post  It uses jQuery  but it should help you even if you are not using it   Basically you add this to your document ready       iframe   load function         RunAfterIFrameLoaded

User · Answer

For those using React  detecting a same-origin iframe load event is as simple as setting onLoad event listener on iframe element    lt iframe src   path-to-iframe-source   onLoad  this loadListener  frameBorder  0    gt

User · Answer

to detect when the iframe has loaded and its document is ready    It s ideal if you can get the iframe to tell you itself from a script inside the frame  For example it could call a parent function directly to tell it it s ready  Care is always required with cross-frame code execution as things can happen in an order you don t expect  Another alternative is to set    var isready  true     in its own scope  and have the parent script sniff for    contentWindow isready     and add the onload handler if not    If for some reason it s not practical to have the iframe document co-operate  you ve got the traditional load-race problem  namely that even if the elements are right next to each other    lt img id  x        gt   lt script type  text javascript  gt      document getElementById  x   onload  function                         lt  script gt    there is no guarantee that the item won t already have loaded by the time the script executes   The ways out of load-races are    on IE  you can use the    readyState    property to see if something s already loaded  if having the item available only with JavaScript enabled is acceptable  you can create it dynamically  setting the    onload    event function before setting source and appending to the page  In this case it cannot be loaded before the callback is set  the old-school way of including it in the markup    lt img onload  callback this         gt    Inline    onsomething    handlers in HTML are almost always the wrong thing and to be avoided  but in this case sometimes it s the least bad option

[javascript] Detecting when Iframe content has loaded (Cross browser)

Examples related to javascript

Examples related to events

Examples related to cross-browser