Nested iframes AKA Iframe Inception

Question

Using jQuery I am trying to access div id  element     lt body gt       lt iframe id  uploads  gt           lt iframe gt               lt div id  element  gt     lt  div gt           lt  iframe gt       lt  iframe gt   lt  body gt    All iframes are on the same domain with no www   non-www issues   I have successfully selected elements within the first iframe but not the second nested iframe   I have tried a few things  this is the most recent  and a pretty desperate attempt    var iframe   jQuery   upload   contents    var iframeInner   jQuery iframe  find  iframe   contents    var iframeContent   jQuery iframeInner  contents   find   element        iframeContent is null   Edit  To rule out a timing issue I used a click event and waited a while   jQuery   click function       var iframe   jQuery   upload   contents   find  iframe       console log iframe find   element           null       Any ideas  Thanks    Update  I can select the second iframe like so     var iframe   jQuery   upload   contents   find  iframe      The problem now seems to be that the src is empty as the iframe is generated with javascript  So the iframe is selected but the content length is 0

User · Answer

I guess your problem is that jQuery is not loaded in your iframes.

The safest approach is to rely on pure DOM-based methods to parse your content.

Or else, start with jQuery, and then once inside your iframes, test once if typeof window.jQuery == 'undefined', if it's true, jQuery is not enabled inside it and fallback on DOM-based method.

User · Answer

If browser supports iframe  then DOM inside iframe come from src attribute of respective tag  Contents that are inside iframe tag are used as a fall back mechanism where browser does not supports iframe tag    Ref  http   www w3schools com tags tag iframe asp

User · Answer

You probably have a timing issue  Your document ready commend is probably firing before the the second iFrame is loaded   You dont have enough info to help much further- but let us know if that seems like the possible issue

User · Answer

You should use live method for elements which are rendered later  like colorbox  hidden fields or iframe       inverter-value   live  change  function          elem   this       ajax         url    main invertor attribute          type   POST         aysnc  false        data   id    this  val            success  function data             code                dataType   html

User · Answer

var iframeInner   jQuery iframe  find  iframe   contents     var iframeContent   jQuery iframeInner  contents   find   element     iframeInner contains elements from    lt div id  element  gt other markup goes here lt  div gt     and iframeContent will find for elements which are inside of    lt div id  element  gt other markup goes here lt  div gt      find doesn t search on current element  that s why it is returning null

User · Answer

Thing is  the code you provided won t work because the  lt iframe gt  element has to have a  src  property  like    lt iframe id  uploads  src  http   domain page html  gt  lt  iframe gt    It s ok to use  contents   to get the content       uploads  contents   will give you access to the second iframe  but if that iframe is  INSIDE  the http   domain page html document the  uploads iframe loaded   To test I m right about this  I created 3 html files named main html  iframe html and noframe html and then selected the div element just fine with       uploads   contents   find  iframe   contents   find   element      There WILL be a delay in which the element will not be available since you need to wait for the iframe to load the resource  Also  all iframes have to be on the same domain   Hope this helps      Here goes the html for the 3 files I used  replace the  src  attributes with your domain and url    main html   lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt main html example lt  title gt        lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt        lt script gt            function                  console log      uploads   contents   find  iframe   contents   find   element         nothing at first              setTimeout  function                      console log      uploads   contents   find  iframe   contents   find   element         wait and you ll have it                2000                      lt  script gt   lt  head gt   lt body gt       lt iframe id  uploads  src  http   192 168 1 70 test iframe html  gt  lt  iframe gt   lt  body gt    iframe html   lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt iframe html example lt  title gt   lt  head gt   lt body gt       lt iframe src  http   192 168 1 70 test noframe html  gt  lt  iframe gt   lt  body gt    noframe html   lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt noframe html example lt  title gt   lt  head gt   lt body gt       lt div id  element  gt some content lt  div gt   lt  body gt

User · Answer

Hey I got something that seems to be doing what you want a do  It involves some dirty copying but works  You can find the working code here  So here is the main html file      lt  DOCTYPE html gt   lt html gt   lt head gt       lt script src  http   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt        lt script type  text javascript  gt            document  ready function                Iframe       frame1                 Iframe on  load   function                    IframeInner   Iframe contents   find  iframe                     IframeInnerClone   IframeInner clone                     IframeInnerClone insertAfter     insertIframeAfter    css  display  none                      IframeInnerClone on  load   function                        IframeContents   IframeInner contents                         YourNestedEl   IframeContents find  div                             lt div gt Yeepi  I can even insert stuff  lt  div gt    insertAfter YourNestedEl                                                       lt  script gt   lt  head gt   lt body gt       lt div id  insertIframeAfter  gt Hello     lt  div gt       lt iframe id  frame1  src  Test Iframe html  gt        lt  iframe gt   lt  body gt   lt  html gt    As you can see  once the first Iframe is loaded  I get the second one and clone it  I then reinsert it in the dom  so I can get access to the onload event  Once this one is loaded  I retrieve the content from non-cloned one  must have loaded as well  since they use the same src   You can then do wathever you want with the content   Here is the Test Iframe html file     lt  DOCTYPE html gt   lt html gt   lt head gt   lt  head gt   lt body gt       lt div gt Test Iframe lt  div gt       lt iframe src  Test Iframe2 html  gt       lt  iframe gt   lt  body gt   lt  html gt    and the Test Iframe2 html file      lt  DOCTYPE html gt   lt html gt   lt head gt   lt  head gt   lt body gt       lt div gt I am the second nested iframe lt  div gt   lt  body gt   lt  html gt

User · Answer

I think the best way to reach your div   var your element    iframe uploads   children  iframe   children  div element      It should work well

[javascript] Nested iframes, AKA Iframe Inception

Examples related to javascript

Examples related to jquery

Examples related to iframe