Select iframe parent from within iframe

Question

I have an iframe which does picture uploading to give a false sense of Ajax uploading.

This iframe's content has javascript which checks various things and sends status. See it as a progress report almost. Anyway, my page that contains the iframe, is the one showing the data and what not, so I want to change the data on the parent page, from within the iframe. Here is my code:

<div id="iframe_response"></div>
<iframe style="border:none" src="someurl" width="100%" height="350px" id="iframe"></iframe>

And here is my jQuery in the iframe:

$('#iframe_response', "#iframe").append('this should go there but it\'s not...');

It does however not write anything to that div. I have called it on document.ready, but alas...

What am I doing wrong?

You are using $(selector, context) iframe_response is not in the context of #iframe. — undefined, Sep 18 '12 at 12:35
when I use `$('#iframe_response',parent)` it doesn't work either. — Bird87 ZA, Sep 18 '12 at 12:38
See also http://stackoverflow.com/questions/12114243/retrieving-a-documents-parent-iframe-in-jquery/36445098#36445098 — Alexis Wilke, Apr 06 '16 at 08:09

Steven Pribilinskiy · Answer 1 · 2016-11-21T09:57:22.220

11

use parent.document instead of window.parent.document

$(parent.document).find('#whatever')

edited Nov 21 '16 at 09:57

answered Jan 01 '15 at 15:22

Steven Pribilinskiy

1,452
15
19

Hi, and do you know how to do if I don't have an ID ? – gordie Nov 13 '18 at 18:39
You can use any CSS selector supported by jQuery – Steven Pribilinskiy Dec 06 '18 at 19:15

Shannon · Accepted Answer · 2012-09-18T23:26:28.943

5

Here's the answer! It's just a little confusing to start with but really easy!

Assuming that same origin policy is not a problem, you can use parent.document to access the elements, and manipulate them.

Demo: Here
Iframe Outer: Here
Iframe Inner: Here

Hope this helps, Spent I fair bit of time figuring this out for you so I'd love the support of upping my answer!

Cheers, Shannon

edited Sep 18 '12 at 23:26

answered Sep 18 '12 at 12:40

Shannon

562
1
5
14

1

I have changed my answer, created detailed fiddle's, this does work! take a look! – Shannon Sep 18 '12 at 23:27
When I go to the Demo link, the box is immediately red, probably because the CSS is wrong. – Alexis Wilke Jan 09 '16 at 02:38
5

Can you please provide your answer here, not in external links – anthonygore Mar 12 '16 at 21:07

makim · Answer 3 · 2014-06-30T09:44:39.490

1

I had the same issue and none of the above solutions (jquery) did work for me.

After a little bit of trial and error this worked for me:

(But beware, this will only work if parent also supports Jquery)

window.parent.$('#iframe_response').html('this should go there but it\'s not...');

edited Jun 30 '14 at 09:44

answered Jun 30 '14 at 08:43

makim

2,850
2
28
46

Could you please explain why this is a good solution to the problem. – Matas Vaitkevicius Jun 30 '14 at 09:10

score 0 · Answer 4 · answered Sep 18 '12 at 12:38

0

You should try this

$(window.parent).find('#iframe_response').html('this should go there but it\'s not...');

answered Sep 18 '12 at 12:38

Yograj Gupta

9,638
3
25
45

Select iframe parent from within iframe

4 Answers4