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?

Answer 1

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