$(body) inside an iframe

Question

Let's say I have an iframe page (iframe.html). Inside this page, I have a script $(body) or $(document). Now I wanted to understand what does it represent ?

Does it refer to iframes body or the main page body ? If it represnts the main page, how do I make it refer to the iframe ?

You mean `$(document.body)`... or better: `$('body')`... Just `$(body)` won't work (unless you explicitly define a variable with that name and put `document.body` inside). — Šime Vidas, Aug 09 '11 at 14:25

score 5 · Answer 1 · answered Aug 09 '11 at 14:29

5

To find element withing iframe try this

$("iframeSelector").contents().find("#element_in_iframe").click(function(e){ 
   alert(1); 
 });

answered Aug 09 '11 at 14:29

ShankarSangoli

69,612
13
93
124

@Diana - I think this is what you might possibly be looking for. +1 – Rion Williams Aug 09 '11 at 14:32

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

$('body') and document refer to those of the iframe's own document.

Within the encapsulating page, use this to access the iframe contents with jQuery selectors.
Within the iframe, window.parent may refer to the encapsulating page.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 09 '11 at 14:23

Lightness Races in Orbit

378,754
76
643
1,055

score 0 · Answer 3 · answered Aug 09 '11 at 14:24

0

If you are inside the iframe:

$(body) and $(document) will refer to the document contained within the iframe, and will typically be ignorant of the parent page.

If you need to access the outer page from within the iframe:

You can use window.parent to access the page that contains the iframe if necessary.

answered Aug 09 '11 at 14:24

Rion Williams

74,820
37
200
327

I am asking this, as the following code is not working; $("#element_in_iframe").click(function(e){ alert(1); }); – Diana Aug 09 '11 at 14:27
For this to work - you will need to wire that event within the page that is contained within the iframe. So if you created that event within the load of the "iframe page" it should fire with no problem. – Rion Williams Aug 09 '11 at 14:28
@Diana Does the page in the IFRAME have jQuery? – Šime Vidas Aug 09 '11 at 14:28
@Diana: They are two _separate_ documents. – Lightness Races in Orbit Aug 09 '11 at 19:29

score 0 · Answer 4 · answered Aug 09 '11 at 14:25

It refers to the body in side your IFRAME. jQuery will always work in the context of the current (first parent) document. If you want to specify a different context, that is when you use jquery's context arguments.

http://api.jquery.com/jQuery/#jQuery1

jQuery( selector, [context] ) selector: A string containing a selector expression context: A DOM Element, Document, or jQuery to use as context

So $('body') refers to the document inside your IFRAME and can be thought to be implicitly doing: $('body', document); To get the document of the parent frame you would have to do something like $('body', parent.document);. This would of course be subject to cross-frame restrictions, depending on how you're doing this.

$(body) inside an iframe

4 Answers4