Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to access frame (not iframe) contents from jQuery

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> 
like image 870
kazanaki Avatar asked May 27 '10 14:05

kazanaki


1 Answers

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.

like image 164
Charles Caldwell Avatar answered Oct 02 '22 15:10

Charles Caldwell