Menu
I have 2 frames in one page like this (home.html)
<frameset rows="50%, 50%"> <frame id="treeContent" src="treeContent.html" /> <frame id="treeStatus" src="treeStatus.html" /> </frameset> and then in one frame (treeStatus.html) I have something like
<body style="margin: 0px"> <div id="statusText">Status bar for Tree</div> </body> I want from the top window to manipulate the div located in the child frame via jquery (e.g show and hide).
I have seen several questions like this and they suggest the following
$(document).ready(function(){ $('#treeStatus').contents().find("#statusText").hide(); }); 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
Here is some output from firebug console
>>> $('#treeStatus') [frame#treeStatus] >>> $('#treeStatus').contents() [] >>> $('#treeStatus').children() [] So how do I access frame elements from the top frame? Am I missing something here?
Answer
After combining both answers here, the correct way is
$('#statusText',top.frames["treeStatus"].document).hide(); For this to work the frame must have the name attribute apart from the id, like this:
<frameset rows="50%, 50%"> <frame id="treeContent" src="treeContent.html" /> <frame name="treeStatus" id="treeStatus" src="treeStatus.html" /> </frameset> 
870
You could grab the Frame and div you are wanting to manipulate and pass it into a variable.
var statusText = top.frames["treeStatus"].document.getElementById('statusText'); Then you can do anything you want to it through jQuery.
$(statusText).whatever(); Though sometimes you just can't get around having to use frames, keep in mind that the <frame> tag is obsoleted in HTML5. If you ever plan on moving up to HTML5, you'll have to use iFrames.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
