jQuery ready in a dynamically inserted iframe

Question

We are using jQuery thickbox to dynamically display an iframe when someone clicks on a picture   In this iframe  we are using galleria a javascript library to display multiple pictures   The problem seems to be that   document  ready in the iframe seems to be fired too soon and the iframe content isn t even loaded yet  so galleria code is not applied properly on the DOM elements     document  ready seems to use the iframe parent ready state to decide if the iframe is ready   If we extract the function called by document ready in a separate function and call it after a timeout of 100 nbsp ms  It works  but we can t take the chance in production with a slow computer     document  ready function     setTimeout ApplyGalleria  100         My question  which jQuery event should we bind to to be able to execute our code when the dynamic iframe is ready and not just it s a parent

User · Accepted Answer

I answered a similar question  see Javascript callback when IFRAME is finished loading    You can obtain control over the iframe load event with the following code   function callIframe url  callback          document body  append   lt IFRAME id  myId      gt            iframe myId   attr  src   url           iframe myId   load function             callback this               In dealing with iframes I found good enough to use load event instead of document ready event

User · Answer

Using jQuery 1 3 2 the following worked for me      iframe   ready function          body      iframe   contents    html  Hello World           REVISION   Actually the above code sometimes looks like it works in Firefox  never looks like it works in Opera   Instead I implemented a polling solution for my purposes  Simplified down it looks like this     function       function manipIframe         el      body      iframe   contents         if  el length    1          setTimeout manipIframe  100         return            el html  Hello World           manipIframe          This doesn t require code in the called iframe pages  All code resides and executes from the parent frame window

User · Answer

Using jQuery 1 3 2 the following worked for me      iframe   ready function          body      iframe   contents    html  Hello World           REVISION   Actually the above code sometimes looks like it works in Firefox  never looks like it works in Opera   Instead I implemented a polling solution for my purposes  Simplified down it looks like this     function       function manipIframe         el      body      iframe   contents         if  el length    1          setTimeout manipIframe  100         return            el html  Hello World           manipIframe          This doesn t require code in the called iframe pages  All code resides and executes from the parent frame window

User · Answer

Following DrJokepu s and David Murdoch idea I implemented a more complete version  It requires jQuery on both the parent and iframe and the iframe to be in your control   iframe code   var iframe   window frameElement   if  iframe       iframe contentDocument   document   normalization  some browsers don t set the contentDocument  only the contentWindow      var parent   window parent        parent document  ready function     wait for parent to make sure it has jQuery ready         var parent    parent jQuery           parent  iframe  trigger  iframeloading               function                parent  iframe  trigger  iframeready                           window  load function     kind of unnecessary  but here for completion             parent  iframe  trigger  iframeloaded                           window  unload function e    not possible to prevent default             parent  iframe  trigger  iframeunloaded                           window  on  beforeunload  function                parent  iframe  trigger  iframebeforeunload                            parent test code     function           iframe   on  iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded   function e           console log e type

User · Answer

This was the exact issue I ran into with our client  I created a little jquery plugin that seems to work for iframe readiness  It uses polling to check the iframe document readyState combined with the inner document url combined with the iframe source to make sure the iframe is in fact  ready    The issue with  onload  is that you need access to the actual iframe being added to the DOM  if you don t then you need to try to catch the iframe loading which if it is cached then you may not  What I needed was a script that could be called anytime  and determine whether or not the iframe was  ready  or not   Here s the question    Holy grail for determining whether or not local iframe has loaded  and here s the jsfiddle I eventually came up with   https   jsfiddle net q0smjkh5 10   In the jsfiddle above  I am waiting for onload to append an iframe to the dom  then checking iframe s inner document s ready state - which should be cross domain because it s pointed to wikipedia - but Chrome seems to report  complete   The plug-in s iready method then gets called when the iframe is in fact ready  The callback tries to check the inner document s ready state again - this time reporting a cross domain request  which is correct  - anyway it seems to work for what I need and hope it helps others    lt script gt     function    document  undefined          fn  iready     function callback          var ifr   this filter  iframe              arg   arguments            src   this            clc   null     collection           lng   50       length of time to wait between intervals           ivl   -1       interval id           chk   function ifr                try                 var cnt   ifr contents                      doc   cnt 0                     src   ifr attr  src                      url   doc URL                switch  doc readyState                    case  complete                     if   src    src      about blank                            we don t care about empty iframes                     ifr data  ready    true                        else if   url    url      about blank                            empty document still needs loaded                     ifr data  ready   undefined                       else                          not an empty iframe and not an empty src                        should be loaded                     ifr data  ready   true                                          break                  case  interactive                     ifr data  ready    true                      break                  case  loading                   default                       still loading                   break                                   catch  ignore                     as far as we re concerned the iframe is ready                  since we won t be able to access it cross domain               ifr data  ready    true                               return ifr data  ready        true                       if  ifr length            ifr each function               if     this  data  ready                     add to collection             clc    clc    clc add   this       this                                   if  clc              ivl   setInterval function                 var rd   true              clc each function                   if     this  data  ready                      if   chk   this                        rd   false                                                                 if  rd                  clearInterval ivl                 clc   null                callback apply src  arg                              lng             else             clc   null            callback apply src  arg                     else           clc   null          callback apply this  arguments                 return this             jQuery  document     lt  script gt

User · Answer

In IFrames I usually solve this problem by putting a small script to the very end of the  block    lt body gt  The content of your IFrame  lt script type  text javascript  gt     lt   CDATA     fireOnReadyEvent       parent IFrameLoaded         gt   lt  script gt   lt  body gt    This work most of the time for me  Sometimes the simplest and most naive solution is the most appropriate

User · Answer

Basically what others have already posted but IMHO a bit cleaner       lt iframe  gt          src   https   example com        load  function             alert  loaded            appendTo  body

User · Answer

Found the solution to the problem   When you click on a thickbox link that open a iframe  it insert an iframe with an id of TB iframeContent   Instead of relying on the   document  ready event in the iframe code  I just have to bind to the load event of the iframe in the parent document       TB iframeContent   top document  load ApplyGalleria     This code is in the iframe but binds to an event of a control in the parent document   It works in FireFox and IE

User · Answer

In IFrames I usually solve this problem by putting a small script to the very end of the  block    lt body gt  The content of your IFrame  lt script type  text javascript  gt     lt   CDATA     fireOnReadyEvent       parent IFrameLoaded         gt   lt  script gt   lt  body gt    This work most of the time for me  Sometimes the simplest and most naive solution is the most appropriate

User · Answer

Try this    lt iframe id  testframe  src  about blank  onload  if  testframe location href     about blank   testframe loaded    gt  lt  iframe gt    All you need to do then is create the JavaScript function testframe loaded

User · Answer

Try this    lt iframe id  testframe  src  about blank  onload  if  testframe location href     about blank   testframe loaded    gt  lt  iframe gt    All you need to do then is create the JavaScript function testframe loaded

User · Answer

Found the solution to the problem   When you click on a thickbox link that open a iframe  it insert an iframe with an id of TB iframeContent   Instead of relying on the   document  ready event in the iframe code  I just have to bind to the load event of the iframe in the parent document       TB iframeContent   top document  load ApplyGalleria     This code is in the iframe but binds to an event of a control in the parent document   It works in FireFox and IE

User · Answer

This function from this answer is the best way to handle this as   ready explicitly fails for iframes  Here s the decision not to support this   The load event also doesn t fire if the iframe has already loaded  Very frustrating that this remains a problem in 2020   function onIframeReady  i  successFn  errorFn        try           const iCon    i first   0  contentWindow          bl    about blank           compl    complete           const callCallback        gt                try                   const  con    i contents                 if  con length     0       https   git io vV8yU                 throw new Error  iframe inaccessible                        successFn  con          catch e       accessing contents failed         errorFn                  const observeOnload        gt         i on  load jqueryMark        gt            try               const src    i attr  src   trim                href   iCon location href              if href     bl    src     bl    src                            i off  load jqueryMark                    callCallback                            catch e                errorFn                             if iCon document readyState     compl        const src    i attr  src   trim        href   iCon location href      if href     bl  amp  amp  src     bl  amp  amp  src                   observeOnload          else           callCallback              else       observeOnload          catch e        errorFn

User · Answer

Found the solution to the problem   When you click on a thickbox link that open a iframe  it insert an iframe with an id of TB iframeContent   Instead of relying on the   document  ready event in the iframe code  I just have to bind to the load event of the iframe in the parent document       TB iframeContent   top document  load ApplyGalleria     This code is in the iframe but binds to an event of a control in the parent document   It works in FireFox and IE

User · Answer

This was the exact issue I ran into with our client  I created a little jquery plugin that seems to work for iframe readiness  It uses polling to check the iframe document readyState combined with the inner document url combined with the iframe source to make sure the iframe is in fact  ready    The issue with  onload  is that you need access to the actual iframe being added to the DOM  if you don t then you need to try to catch the iframe loading which if it is cached then you may not  What I needed was a script that could be called anytime  and determine whether or not the iframe was  ready  or not   Here s the question    Holy grail for determining whether or not local iframe has loaded  and here s the jsfiddle I eventually came up with   https   jsfiddle net q0smjkh5 10   In the jsfiddle above  I am waiting for onload to append an iframe to the dom  then checking iframe s inner document s ready state - which should be cross domain because it s pointed to wikipedia - but Chrome seems to report  complete   The plug-in s iready method then gets called when the iframe is in fact ready  The callback tries to check the inner document s ready state again - this time reporting a cross domain request  which is correct  - anyway it seems to work for what I need and hope it helps others    lt script gt     function    document  undefined          fn  iready     function callback          var ifr   this filter  iframe              arg   arguments            src   this            clc   null     collection           lng   50       length of time to wait between intervals           ivl   -1       interval id           chk   function ifr                try                 var cnt   ifr contents                      doc   cnt 0                     src   ifr attr  src                      url   doc URL                switch  doc readyState                    case  complete                     if   src    src      about blank                            we don t care about empty iframes                     ifr data  ready    true                        else if   url    url      about blank                            empty document still needs loaded                     ifr data  ready   undefined                       else                          not an empty iframe and not an empty src                        should be loaded                     ifr data  ready   true                                          break                  case  interactive                     ifr data  ready    true                      break                  case  loading                   default                       still loading                   break                                   catch  ignore                     as far as we re concerned the iframe is ready                  since we won t be able to access it cross domain               ifr data  ready    true                               return ifr data  ready        true                       if  ifr length            ifr each function               if     this  data  ready                     add to collection             clc    clc    clc add   this       this                                   if  clc              ivl   setInterval function                 var rd   true              clc each function                   if     this  data  ready                      if   chk   this                        rd   false                                                                 if  rd                  clearInterval ivl                 clc   null                callback apply src  arg                              lng             else             clc   null            callback apply src  arg                     else           clc   null          callback apply this  arguments                 return this             jQuery  document     lt  script gt

User · Answer

Found the solution to the problem   When you click on a thickbox link that open a iframe  it insert an iframe with an id of TB iframeContent   Instead of relying on the   document  ready event in the iframe code  I just have to bind to the load event of the iframe in the parent document       TB iframeContent   top document  load ApplyGalleria     This code is in the iframe but binds to an event of a control in the parent document   It works in FireFox and IE

User · Answer

I m loading the PDF with jQuery ajax into browser cache  Then I create embedded element with data already in browser cache  I guess it will work with iframe too    var url    http   example com my pdf      show spinner   mobile showPageLoadingMsg  b   note  false     ajax       url  url      cache  true      mimeType   application pdf       success  function                 display cached data           scroller  append   lt embed type  application pdf  src      url        gt                hide spinner           mobile hidePageLoadingMsg                You have to set your http headers correctly as well    HttpContext Response Expires   1  HttpContext Response Cache SetNoServerCaching    HttpContext Response Cache SetAllowResponseInBrowserHistory false   HttpContext Response CacheControl    Private

User · Answer

In IFrames I usually solve this problem by putting a small script to the very end of the  block    lt body gt  The content of your IFrame  lt script type  text javascript  gt     lt   CDATA     fireOnReadyEvent       parent IFrameLoaded         gt   lt  script gt   lt  body gt    This work most of the time for me  Sometimes the simplest and most naive solution is the most appropriate

User · Answer

I m loading the PDF with jQuery ajax into browser cache  Then I create embedded element with data already in browser cache  I guess it will work with iframe too    var url    http   example com my pdf      show spinner   mobile showPageLoadingMsg  b   note  false     ajax       url  url      cache  true      mimeType   application pdf       success  function                 display cached data           scroller  append   lt embed type  application pdf  src      url        gt                hide spinner           mobile hidePageLoadingMsg                You have to set your http headers correctly as well    HttpContext Response Expires   1  HttpContext Response Cache SetNoServerCaching    HttpContext Response Cache SetAllowResponseInBrowserHistory false   HttpContext Response CacheControl    Private

User · Answer

In IFrames I usually solve this problem by putting a small script to the very end of the  block    lt body gt  The content of your IFrame  lt script type  text javascript  gt     lt   CDATA     fireOnReadyEvent       parent IFrameLoaded         gt   lt  script gt   lt  body gt    This work most of the time for me  Sometimes the simplest and most naive solution is the most appropriate

User · Answer

Basically what others have already posted but IMHO a bit cleaner       lt iframe  gt          src   https   example com        load  function             alert  loaded            appendTo  body

User · Answer

Following DrJokepu s and David Murdoch idea I implemented a more complete version  It requires jQuery on both the parent and iframe and the iframe to be in your control   iframe code   var iframe   window frameElement   if  iframe       iframe contentDocument   document   normalization  some browsers don t set the contentDocument  only the contentWindow      var parent   window parent        parent document  ready function     wait for parent to make sure it has jQuery ready         var parent    parent jQuery           parent  iframe  trigger  iframeloading               function                parent  iframe  trigger  iframeready                           window  load function     kind of unnecessary  but here for completion             parent  iframe  trigger  iframeloaded                           window  unload function e    not possible to prevent default             parent  iframe  trigger  iframeunloaded                           window  on  beforeunload  function                parent  iframe  trigger  iframebeforeunload                            parent test code     function           iframe   on  iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded   function e           console log e type

User · Answer

This function from this answer is the best way to handle this as   ready explicitly fails for iframes  Here s the decision not to support this   The load event also doesn t fire if the iframe has already loaded  Very frustrating that this remains a problem in 2020   function onIframeReady  i  successFn  errorFn        try           const iCon    i first   0  contentWindow          bl    about blank           compl    complete           const callCallback        gt                try                   const  con    i contents                 if  con length     0       https   git io vV8yU                 throw new Error  iframe inaccessible                        successFn  con          catch e       accessing contents failed         errorFn                  const observeOnload        gt         i on  load jqueryMark        gt            try               const src    i attr  src   trim                href   iCon location href              if href     bl    src     bl    src                            i off  load jqueryMark                    callCallback                            catch e                errorFn                             if iCon document readyState     compl        const src    i attr  src   trim        href   iCon location href      if href     bl  amp  amp  src     bl  amp  amp  src                   observeOnload          else           callCallback              else       observeOnload          catch e        errorFn

[javascript] jQuery .ready in a dynamically inserted iframe

Examples related to javascript

Examples related to jquery

Examples related to iframe

Examples related to thickbox

Examples related to galleria