<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel=stylesheet href=../../css/main.css><link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script><script>window.jQuery||document.write('<script src="../../js/vendors/jquery-3.3.1.min.js"><\/script>')</script><script>document.write('<script src="//pagea'+'d2.googles'+'yndication.com/pagea'+'d/js/a'+'dsby'+'google.js"><\/script>')</script><script>var superSpecialObject={};superSpecialObject['google_a'+'d_client']='ca-p'+'ub-4469282388984999';superSpecialObject['enable_page_level_a'+'ds']=true;(window['a'+'dsbygoogle']=window['a'+'dsbygoogle']||[]).push(superSpecialObject);</script><header class="page-header js-page-header"><a class=page-header-logo-container href=https://geek-questions.imtqy.com/index.html></a><div class=page-header-text>All geek questions in one place</div></header><section class="page js-page"><div itemscope itemtype=http://schema.org/QAPage class=page><div class=main-col itemprop=mainEntity itemscope itemtype=http://schema.org/Question><div class=question-header><h1 itemprop=name>How to get element attribute inside two iframes</h1></div><div class=question><div class=question-row><div class=question-text><div class=description itemprop=text><pre class=prettyprint-override><code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>head</span>></span><span class=hljs-tag></<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>id</span>=<span class=hljs-string>"num1"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"/idk"</span>></span> <span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>head</span>></span><span class=hljs-tag></<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>id</span>=<span class=hljs-string>"num2"</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"/idk2"</span>></span> <span class=hljs-tag><<span class=hljs-name>html</span>></span> <span class=hljs-tag><<span class=hljs-name>head</span>></span><span class=hljs-tag></<span class=hljs-name>head</span>></span> <span class=hljs-tag><<span class=hljs-name>body</span>></span> <span class=hljs-tag><<span class=hljs-name>div</span> <span class=hljs-attr>id</span>=<span class=hljs-string>"div1"</span>></span> <span class=hljs-tag><<span class=hljs-name>div</span> <span class=hljs-attr>id</span>=<span class=hljs-string>"div2"</span>></span> <span class=hljs-tag><<span class=hljs-name>a</span> <span class=hljs-attr>href</span>=<span class=hljs-string>"http://www.blablabla.com"</span>></span><span class=hljs-tag></<span class=hljs-name>a</span>></span> <span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag></<span class=hljs-name>div</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span> <span class=hljs-tag></<span class=hljs-name>iframe</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span> <span class=hljs-tag></<span class=hljs-name>body</span>></span> <span class=hljs-tag></<span class=hljs-name>html</span>></span></code> </pre><p>my question is: how do I get the href attribute of a tag tag inside these two frames and two divs with javascript or jquery, I prefer JS. (For example: "http://www.blablabla.com").</div><div class="favorite hidden"><i class="far fa-star"></i></div><div class=votes-question><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+4</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=tags><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'javascript'" rel=tag>javascript</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'jquery'" rel=tag>jquery</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'html'" rel=tag>html</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'href'" rel=tag>href</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class=tag title="show questions tagged with 'iframe'" rel=tag>iframe</a></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>user1725191</a></span></span> <time title="2012-10-06 14:08" itemprop=dateCreated datetime=2012-10-06T14:08:40+0000>Oct 6 '12 at 14:08</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><ins style=height:90px;display:block data-zxname=zx-adnet data-zxadslot=ZX-QRST data-zxw=0 data-zxh=90 data-zxid=2 data-overlay=false></ins><div class=answers id=answers_hash><div class=answers-header><span class=pull-left><span itemprop=answerCount>4</span> answers</span><div class=clearfix></div></div><div class="answer-pager hidden"></div><div class=answer id=4445245_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Ok, so getting the first iframe is easy. Just click on the <code>name</code> attribute in the <code><iframe></code> and use <code>window.frames['<name-of-your-iframe>']</code> to get its <code>window</code> object, which can then be used to refer to the <code>document</code> this iFrame. It seems reasonable to expect <code>document.getElementById('num1')</code> to return the same, but the latter returns the html element, while the former returns the actual window object, which is more useful for your purposes.<p>The problem with a nested iFrame is that since you are setting the <code>src</code> attribute, I don't think you can easily access it. Although you can try using the same method.<p>Hope this helps.</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+2</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Mutahhir</a></span></span> <time title="2012-10-06 14:38" itemprop=dateCreated datetime=2012-10-06T14:38:03+0000>Oct 6 '12 at 14:38</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><ins style=height:90px;display:block;margin-top:15px data-zxname=zx-adnet data-zxadslot=ZX-QRST data-zxw=0 data-zxh=90 data-zxid=3 data-overlay=false></ins><div class="answer rltd" id=4445246_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>It may be an ugly solution, but at least it works, and in fact it is quite simple:<pre class=prettyprint-override> <code class="hljs makefile">// Create container to store iframes' inner HTML and to be able to work with it var container = document.createElement(<span class=hljs-string>"div"</span>); // Add HTML of first iframe to container container.innerHTML = document.querySelector(<span class=hljs-string>"#num1"</span>).innerHTML; // Add HTML of nested (second) iframe to container container.innerHTML = container.querySelector(<span class=hljs-string>"#num2"</span>).innerHTML; // Finally get href attribute var href = container.querySelector(<span class=hljs-string>"#div2 a"</span>).getAttribute(<span class=hljs-string>"href"</span>); console.log(href);</code> </pre><p>Most modern browsers already support <code>querySelector()</code> , you will have problems with older IEs. See <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src>http://caniuse.com/queryselector</a> .<p><strong>Edit:</strong> This code is based on the following idea: Get the iframe HTML content and copy / paste it into the <code>div</code> element to be able to directly execute requests for it (so we don’t have to worry about getting the iframe <code>document</code> object). When this is done with the first iframe, we will repeat it for the second (nested) iframe. Then we can simply read the attribute of the desired elements. <code>querySelector()</code> can be used almost like a jQuery selector (for example, <code>$("#id")</code> ).</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+1</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Aletheios</a></span></span> <time title="2012-10-06 15:14" itemprop=dateCreated datetime=2012-10-06T15:14:55+0000>Oct 6 '12 at 15:14</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer bt" id=4445248_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><pre class=prettyprint-override> <code class="hljs javascript"><span class=hljs-keyword>var</span> iframe1 = <span class=hljs-built_in>document</span>.getElementById(<span class=hljs-string>'num1'</span>); <span class=hljs-keyword>var</span> innerDoc1 = iframe1.contentDocument || iframe1.contentWindow.document; <span class=hljs-keyword>var</span> iframe2 = innerDoc1.getElementById(<span class=hljs-string>'num2'</span>); <span class=hljs-keyword>var</span> innerDoc2 = iframe2.contentDocument || iframe2.contentWindow.document;</code> </pre><p>and finally you get<pre class=prettyprint-override> <code class="hljs coffeescript"><span class=hljs-built_in>console</span>.log(innerDoc2.getElementById(<span class=hljs-string>'div2'</span>).getAttribute(<span class=hljs-string>'href'</span>));</code> </pre><p>* <strong>there are no frameworks necessary for this simple task</strong></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+1</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>Gabriel lupu</a></span></span> <time title="2012-12-14 09:29" itemprop=dateCreated datetime=2012-12-14T09:29:30+0000>Dec 14 '12 at 9:29</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer last" id=4445247_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>Try something like this:<pre class=prettyprint-override> <code class="hljs ruby">var $iframe1 = jQuery(<span class=hljs-string>'#num1'</span>); var iframe1Content = $iframe1[<span class=hljs-number>0</span>].contentDocument <span class=hljs-params>||</span> $iframe1[<span class=hljs-number>0</span>].contentWindow.document; <span class=hljs-regexp>//</span> see <span class=hljs-symbol>also:</span> <span class=hljs-symbol>http:</span>/<span class=hljs-regexp>/stackoverflow.com/questions</span><span class=hljs-regexp>/926916/how</span>-to-get-the-bodys-content-of-an-iframe-<span class=hljs-keyword>in</span>-javascript/<span class=hljs-number>11107977</span><span class=hljs-comment>#11107977 var $iframe2 = jQuery('#num2', iframe1Content); var iframe2Content = $iframe2[0].contentDocument || $iframe2[0].contentWindow.document; var $link = jQuery('#div2 a', iframe2Content); console.log($link);</span></code> </pre><p>jQuery-Selector-Method 'jQuery (' selector ', context)' allows you to specify a "context". This means a jQuery-element to find a "selector" inside. First, get the content (contentDocument) of the first iFrame and use it as the context for selecting the second iFrame.</div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class=vote-count itemprop=upvoteCount>0</div><i class="glyphicon glyphicon-arrow-down"></i></div><div class=clearfix></div><div class=action-time><span itemprop=author itemscope itemtype=http://schema.org/Person><span itemprop=name><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel=noopener target=_blank>algorhythm</a></span></span> <time title="2012-12-14 09:21" itemprop=dateCreated datetime=2012-12-14T09:21:56+0000>Dec 14 '12 at 9:21</time></div><a class=aa-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target=_blank rel=noopener>source</a> <a itemprop=url class=s-link href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title=share>share</a><div class=clearfix></div></div></div></div><div class="answer-pager hidden"></div></div></div></div><p>Source: <a rel=nofollow href=https://habr.com/ru/post/1438162/>https://habr.com/ru/post/1438162/</a><section class="more-articles-navigation-panel js-more-articles-navigation-panel"><h4>More articles:</h4><nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages"><li><a href=../1438157/index.html>The editing mode in uitableviewcell only works in ios 5.0 correctly - ios</a><li><a href=../1438158/index.html>Use the camera of an Android device for background activity - android</a><li><a href=../1438159/index.html>Performing a specific task after pressing "ctrl" + "alt" + "backspace" - java</a><li><a href=../1438160/index.html>How to access the program name / argv [0] in Forth? - forth</a><li><a href=../1438161/index.html>jquery.selectbox-0.2 problem with ie7 - drop-down lists appearing behind elements instead of the front one - javascript</a><li><a href=../1438163/index.html>Java - two interfaces with the same method, one just common - java</a><li><a href=../1438164/index.html>Why, in an attempt to finally catch, is returning finally? - java</a><li><a href=../1438165/index.html>mongodb $ all and $ very slowly even in indexed fields - mongodb</a><li><a href=../1438166/index.html>https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=https://fooobar.com/questions/1438166/how-does-ruby-use-symbols-to-reference-variable-names&usg=ALkJrhiP_hubZAJ3d72AOFqZm1qpLM2yug</a><li><a href=../1438167/index.html>How to create a WAV file with a custom frequency tone / wave? - php</a></ul></nav></section><br><a href=../../allArticles.html><strong>All Articles</strong></a> <script src=../../js/main.js></script><script>(function(d,w,c){(w[c]=w[c]||[]).push(function(){try{w.yaCounter62683636=new Ya.Metrika({id:62683636,clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});}catch(e){}});var n=d.getElementsByTagName("script")[0],s=d.createElement("script"),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.src="https://mc.yandex.ru/metrika/watch.js";if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"yandex_metrika_callbacks");</script><noscript><div><img src=https://mc.yandex.ru/watch/62683636 style=position:absolute;left:-9999px alt></div></noscript><script>window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;ga('create','UA-166339405-1','auto');ga('send','pageview')</script><script src=https://www.google-analytics.com/analytics.js async defer></script></section><footer class=page-footer><div class="page-footer-legal-info-container page-footer-element"><p>Geek Questions | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span></div><div class="page-footer-counters-container page-footer-element"><a class=page-footer-counter-clustrmap href=# title="Visit tracker"><img src="https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=x9KFE5t3Mv44EqtuX_BNXcB69A0sIUZAkKxnezcia0Y&co=3a3a3a&ct=ffffff"></a></div></footer>