Select iframe parent from iframe

Question

I have an iframe that is loading an image to give a false feel of Ajax loading.

There is javascript in this iframe content that checks for different things and sends status. It is almost like a progress report. Anyway, my page containing the iframe is the one that shows the data and what is not, so I want to change the data on the parent page from 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 iframe:

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

However, he writes nothing to this div. I called it on document.ready, but alas ...

What am I doing wrong?

Answer 1

Here's the answer! It's just a little confusing, but very easy!

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

Demo: Here
Iframe Outer: Here
Iframe Inner: Here

Hope this helps, spent a bit of time figuring it out for you, so I would like to support my answer!

Cheers, Shannon

Answer 2

use parent.document instead of window.parent.document

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

Answer 3

I had the same problem and none of the above solutions (jquery) worked for me.

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

(But be careful, this will only work if the parent element also supports jQuery)

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

Answer 4

You have to try this

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