<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>Target parent div containing iframe from iframe</h1></div><div class=question><div class=question-row><div class=question-text><div class=description itemprop=text><p>So basically I have something like this<pre class=prettyprint-override><code class="hljs javascript"><div <span class=hljs-class><span class=hljs-keyword>class</span></span>=<span class=hljs-string>"iframe-holder"</span>> <span class=xml><span class=hljs-tag><<span class=hljs-name>span</span>></span><span class=hljs-tag></<span class=hljs-name>span</span>></span></span> <iframe src=<span class=hljs-string>"iframe.html"</span> width=<span class=hljs-string>"200"</span> height=<span class=hljs-string>"200"</span> <<span class=hljs-regexp>/div> <div class="iframe-holder"> <span></</span>span> <span class=xml><span class=hljs-tag><<span class=hljs-name>iframe</span> <span class=hljs-attr>src</span>=<span class=hljs-string>"iframe.html"</span> <span class=hljs-attr>width</span>=<span class=hljs-string>"200"</span> <span class=hljs-attr>height</span>=<span class=hljs-string>"200"</span> </<span class=hljs-attr>div</span>></span></span> <div <span class=hljs-class><span class=hljs-keyword>class</span></span>=<span class=hljs-string>"iframe-holder"</span>> <span class=xml><span class=hljs-tag><<span class=hljs-name>span</span>></span><span class=hljs-tag></<span class=hljs-name>span</span>></span></span> <iframe src=<span class=hljs-string>"iframe.html"</span> width=<span class=hljs-string>"200"</span> height=<span class=hljs-string>"200"</span> <<span class=hljs-regexp>/div> <script> function where_am_i(iframe_parent_div,msg){ $(iframe_parent_div).find('span').html(msg); } </</span>script></code> </pre><p>and then in my iframe-holder.html I basically have this<pre class=prettyprint-override> <code class="hljs xml"><span class=hljs-tag><<span class=hljs-name>a</span> <span class=hljs-attr>href</span>=<span class=hljs-string>"#"</span> <span class=hljs-attr>id</span>=<span class=hljs-string>"msg"</span>></span>Show Message In Parent Div<span class=hljs-tag></<span class=hljs-name>a</span>></span> <span class=hljs-tag><<span class=hljs-name>script</span>></span><span class=javascript> <span class=hljs-comment>//i want to basically imp $('msg').click(function(event){ event.preventDefault(); var iframe_parent_div=???;//how do I get this? parent.where_am_i(iframe_parent_div,'This is where this iframe is'); }); </span></span><span class=hljs-tag></<span class=hljs-name>script</span>></span></code> </pre><p>So basically, my question is how to target the parent div (div.iframe-holder) of the iframe instance that I click on the "Show Message" button on? Is it possible?<p>I know that I can pass through a source a variable with the index ie iframe.html? index = 0 for the first iframe.html? index = 1 for the second, etc., but this is not a viable solution for me because iframes will have a lot of navigation on different pages, therefore, going through all pages, the index is not an option.</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 '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 '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>Zaptree</a></span></span> <time title="2012-03-26 17:59" itemprop=dateCreated datetime=2012-03-26T17:59:46+0000>Mar 26 '12 at 17:59</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>2</span> answers</span><div class=clearfix></div></div><div class="answer-pager hidden"></div><div class="answer accepted" id=4372364_hash itemscope itemtype=http://schema.org/Answer itemprop=acceptedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>do:<pre class=prettyprint-override> <code class="hljs javascript"><span class=hljs-keyword>var</span> iframe_parent_div = <span class=hljs-built_in>window</span>.frameElement ? <span class=hljs-built_in>window</span>.frameElement.parentNode : <span class=hljs-literal>null</span>;</code> </pre></div><div class=votes-answer><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop=upvoteCount>+9</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>Prusse</a></span></span> <time title="2012-03-26 18:30" itemprop=dateCreated datetime=2012-03-26T18:30:17+0000>Mar 26 '12 at 18:30</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 last rltd" id=4372365_hash itemscope itemtype=http://schema.org/Answer itemprop=suggestedAnswer><div class=answer-row><div class=answer-text><div class=desc itemprop=text><p>You can write a function in the parent document that takes the name of the iframe as a parameter, and then gets the div-iframe-owner. Something like this should be enough:<p><strong>Code in parent document</strong><pre class=prettyprint-override> <code class="hljs php"><span class=hljs-keyword>var</span> findIframeHolder = <span class=hljs-function><span class=hljs-keyword>function</span> <span class=hljs-params>(name)</span> </span>{ <span class=hljs-keyword>var</span> $frame = $(<span class=hljs-string>'iframe[name="'</span> + name + <span class=hljs-string>'"]'</span>); <span class=hljs-keyword>var</span> $frameParent = $frame.<span class=hljs-keyword>parent</span>(); };</code> </pre><p><strong>Code in IFrame to call parent function</strong><pre class=prettyprint-override> <code class="hljs css"><span class=hljs-selector-tag>parent</span><span class=hljs-selector-class>.findIframeHolder</span>(<span class=hljs-selector-tag>window</span><span class=hljs-selector-class>.name</span>);</code> </pre></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>tjscience</a></span></span> <time title="2012-03-26 18:32" itemprop=dateCreated datetime=2012-03-26T18:32:47+0000>Mar 26 '12 at 18:32</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/1403517/>https://habr.com/ru/post/1403517/</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=../1403512/index.html>Virtualenv for multiple users or groups - python</a><li><a href=../1403513/index.html>How can I change the "get" and "set" to the Property Model? - model-view-controller</a><li><a href=../1403514/index.html>NSOperation inside NSOperationQueue fails - ios</a><li><a href=../1403515/index.html>How to make an item dragged through jquery not ui - javascript</a><li><a href=../1403516/index.html>Scala / Akka Socket Server IterateeRef Syntax - scala</a><li><a href=../1403518/index.html>Is the unfollow JavaScript Twitter post similar to the following event or a way to do this? - javascript</a><li><a href=../1403519/index.html>PHP interpreter gets undefined constant OCI_COMMIT_ON_SUCCESS with ADODB - php</a><li><a href=../1403520/index.html>How should I create C ++ members that depend on each other? - c ++</a><li><a href=../1403521/index.html>Python Sparql Querying Local File - python</a><li><a href=../1403522/index.html>Customize image sequence with matplotlib Python - python</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>