Databases
StackOverflow2013
Postsdbo
POHow to access frame (not iframe) contents from jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to access frame (not iframe) contents from jQuery
    text
    copied!<p>I have 2 frames in one page like this (<strong>home.html</strong>)</p> <pre><code>&lt;frameset rows="50%, 50%"&gt; &lt;frame id="treeContent" src="treeContent.html" /&gt; &lt;frame id="treeStatus" src="treeStatus.html" /&gt; &lt;/frameset&gt; </code></pre> <p>and then in one frame (<strong>treeStatus.html</strong>) I have something like</p> <pre><code>&lt;body style="margin: 0px"&gt; &lt;div id="statusText"&gt;Status bar for Tree&lt;/div&gt; &lt;/body&gt; </code></pre> <p>I want from the top window to manipulate the div located in the child frame via jquery (e.g show and hide).</p> <p>I have seen <a href="https://stackoverflow.com/questions/2732915/accessing-iframe-content-using-jquery-on-ie">several</a> <a href="https://stackoverflow.com/questions/2444647/jquery-how-do-i-focus-on-contents-of-iframe-after-clearing">questions</a> <a href="https://stackoverflow.com/questions/1324764/accessing-a-frame-within-a-frame">like</a> <a href="http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/" rel="nofollow noreferrer">this</a> and they suggest the following</p> <pre><code>$(document).ready(function(){ $('#treeStatus').contents().find("#statusText").hide(); }); </code></pre> <p>I do not know if this works with iframes but in my case where I have simple frames it does not seem to work. The code is placed inside home.html</p> <p>Here is some output from firebug console</p> <pre><code>&gt;&gt;&gt; $('#treeStatus') [frame#treeStatus] &gt;&gt;&gt; $('#treeStatus').contents() [] &gt;&gt;&gt; $('#treeStatus').children() [] </code></pre> <p>So how do I access frame elements from the top frame? Am I missing something here?</p> <p><strong>Answer</strong></p> <p>After combining both answers here, the correct way is</p> <pre><code>$('#statusText',top.frames["treeStatus"].document).hide(); </code></pre> <p>For this to work the frame must have the <em>name</em> attribute apart from the id, like this:</p> <pre><code>&lt;frameset rows="50%, 50%"&gt; &lt;frame id="treeContent" src="treeContent.html" /&gt; &lt;frame name="treeStatus" id="treeStatus" src="treeStatus.html" /&gt; &lt;/frameset&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload