CODEWITHSUNDEEP
javascriptjqueryhtmlframe
kazanaki
kazanaki

Reputation: 8054

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>

Upvotes: 28

Views: 41465

Answers (5)

Andreas Covidiot
Andreas Covidiot

Reputation: 4765

I used the following successfully:

$(  '#foo',  top.frames['bar'].document  )

(also works with nested frames that are automagically appended in top.frames)

Upvotes: 0

bacar
bacar

Reputation: 10091

For a pure jquery solution (that doesn't require top.frames etc), the following seems to work:

$('some selector for item from frame' ,$('frame selector')[0].contentDocument)

This has the advantage that it works for nested frames:

$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)

Upvotes: 2

Ionut Catalin Badea
Ionut Catalin Badea

Reputation: 31

https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/

    $(document).ready(function(){
     $("#Button1").click(function(){
      $(parent.rightFrame.document).contents().find(‘#TextBox1’).val(‘Hello from left frame!’);
     });
    });

But I used :

    $.post("content_right.php",{id:id},function(data)
     $(parent.frames["content_right"].document.body).html(data) ;
    });

Upvotes: 3

user2100764
user2100764

Reputation: 51

I have nested frames. In my case, to make it work i used command:

var statusText = 
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");

Then, as Charles already answered, you can do anything you want to it through jQuery:

$(statusText).whatever();

Upvotes: 5

Charles Caldwell
Charles Caldwell

Reputation: 17169

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.

Upvotes: 12

Related Questions