how to access iFrame parent page using jquery?

Question

I have an iframe and in order to access parent element I implemented following code:

window.parent.document.getElementById('parentPrice').innerHTML

How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?

See also http://stackoverflow.com/questions/12114243/retrieving-a-documents-parent-iframe-in-jquery/36445098#36445098 — Alexis Wilke, Apr 06 '16 at 08:09

score 509 · Accepted Answer · answered Apr 07 '09 at 17:47

509

To find in the parent of the iFrame use:

$('#parentPrice', window.parent.document).html();

The second parameter for the $() wrapper is the context in which to search. This defaults to document.

answered Apr 07 '09 at 17:47

Pim Jager

30,915
16
70
97

18

Cool - you acknowledged the thanks before he thanked you. StackOverflow having problems with timezones maybe? – belugabob Mar 19 '10 at 08:49
25

You could also do: $(window.parent.document).find("#parentPrice").html(); – jhorback Sep 10 '10 at 17:46
@belugabob It's a wizzard's fault. – Erik Escobedo Sep 22 '10 at 17:42
1

For those who launched a windoid with window.open, don't forget about that old JS standard window.opener.document. $("#someDiv", window.opener.document) works. – jjohn May 21 '13 at 18:03
What about `$("#someDiv", top.document)`? – Gabriel Nahmias Sep 14 '13 at 14:40
3

This will only work if the source of the iframe has jQuery loaded. In my experience, the iframe source would not have jQuery but the need to call one of the parent's jQuery functions is often needed. To do this use: window.document.$("#parentPrice").html() This was the answer Álvaro G. Vicario posted. – David Kinkead Aug 07 '14 at 15:46
@jhorback One *should* be using that approach, as $("#node", context) internally calls find(). – The Onin Nov 30 '15 at 20:44

score 40 · Answer 2 · answered Apr 07 '09 at 18:09

40

how to access iFrame parent page using jquery

window.parent.document.

jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.

answered Apr 07 '09 at 18:09

bobince

498,320
101
621
807

6

+1. jQuery is great, but lots of answers to simple problems seem to be 'use jQuery'. If you're loading the library anyway, fine, but don't load it one task. Also, people seem concerned about JS perf, then use an API on top of JS to do things easily possible (and possibly faster) without the API. – Grant Wagner Apr 07 '09 at 18:26
1

@Grant Though I do dream of jQuery becoming native code inside browsers. – Dan Blows Apr 29 '11 at 04:07
3

@Blowski: that's my nightmare! jQuery contains a lot of extremely complex and fragile “do what I mean” code that would be completely inappropriate to put in an official API. – bobince Apr 29 '11 at 21:07
@Blowski, I'd like to join your oppinion, however, even jQuery has its own shortcomings. In addition it is evolving and evolving much faster than any other JS lib. So it will be very difficult for js engines to keep up to date )). – Oybek May 27 '12 at 12:54
1

@bobince: Clearly, you should _always_ replace all Javascript with jQuery. It's like bacon; there is no situation in which less is better. ;) – MW. Jan 20 '14 at 13:02
2

The OP already had window.parent.document, so this didn't answer anything. And imagine the selector logic being a lot more complex than an element's ID, a situation in which jQuery is darn handy. I feel like the question is "how do I say 'hello' in French?" and this answer is "speak German". – grantwparks Nov 08 '14 at 06:08
No, it's a bit more like saying, "You don't need to learn French! This is Germany! German is fine." With a little yelling and hand-waving for effect. :-) – jpaugh Jun 22 '15 at 21:07

score 15 · Answer 3 · answered Apr 13 '13 at 19:31

15

If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:

window.parent.$
window.parent.jQuery

Example:

window.parent.$.modal.close();

jQuery gets attached to the window object and that's what window.parent is.

answered Apr 13 '13 at 19:31

Álvaro González

128,942
37
233
325

I'm using my iframe like a user control. This lets me keep it nice and clean. – Dan Randolph Dec 26 '15 at 17:30

Amr · Answer 4 · 2016-02-21T14:29:35.550

You can access elements of parent window from within an iframe by using window.parent like this:

// using jquery    
window.parent.$("#element_id");

Which is the same as:

// pure javascript
window.parent.document.getElementById("element_id");

And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:

// using jquery
window.top.$("#element_id");

Which is the same as:

// pure javascript
window.top.document.getElementById("element_id");

score 7 · Answer 5 · edited Apr 06 '16 at 07:18

7

in parent window put :

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

and in iframe src file put :

<script>window.parent.ifDoneChildFrame('Your value here');</script>

edited Apr 06 '16 at 07:18

Alexis Wilke

15,168
8
60
116

answered Apr 04 '10 at 07:58

stieven

87
1
1

score 5 · Answer 6 · answered Jan 17 '11 at 04:49

5

yeah it works for me as well.

Note : we need to use window.parent.document

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });

answered Jan 17 '11 at 04:49

Yogesh Gandhi

51
1
1

score 5 · Answer 7 · edited Jun 27 '12 at 18:59

5

It's working for me with little twist. In my case I have to populate value from POPUP JS to PARENT WINDOW form.

So I have used $('#ee_id',window.opener.document).val(eeID);

Excellent!!!

edited Jun 27 '12 at 18:59

Siddharth Rout

137,434
15
189
237

answered Feb 23 '12 at 04:51

Hitesh Patel

51
1
1

cj5 · Answer 8 · 2012-09-17T16:07:13.013

3

Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.

edited Sep 17 '12 at 16:07

answered Sep 12 '12 at 23:10

cj5

745
2
11
33

score 1 · Answer 9 · answered Mar 28 '16 at 13:30

There are multiple ways to do these.

I) Get main parent directly.

for exa. i want to replace my child page to iframe then

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

here top.location gets parent directly.

II) get parent one by one,

var element = $('.iframe:visible', window.parent.document);

here if you have more then one iframe, then specify active or visible one.

you also can do like these for getting further parents,

var masterParent = element.parent().parent().parent()

III) get parent by Identifier.

var myWindow = window.top.$("#Identifier")

how to access iFrame parent page using jquery?

9 Answers9

Linked

Related