Call javascript method defined in parent from iframe

Question

After some research (even at stackoverflow) I still can't figure out how to do this. parent.method() won't do the trick, nor some other solutions I've tried.

Situation: I have a index.html on the client side (mobile phone in this case) which has an iframe loading server-side page. What I need to do is call a javascript method defined in the index.html (client side) from the iframe content (server-side).

As an example (I'm not using android in the question described above), Android apps have addJavascriptInterface which, when defined, allows one to call methods defined client-side from server-side pages just invoking window.CustomObject.MethodToCall().

Any hint?

Thanks!

try top instead of parent and check you are definitely not doing x-domain or x-protocol. — annakata
– annakata, Commented Sep 28, 2010 at 15:55
top also doesn't do the trick. Since the index.html is defined client-side, I believe it could be seen as different domains. But if this is the case, and therefore not possible to call the js method, how can we explain the android example I gave above? Thanks for the help! — GuilhermeA
– GuilhermeA, Commented Sep 28, 2010 at 16:00
What do you mean by index.html is defined client side? That's kind of nonsensical. — annakata
– annakata, Commented Sep 28, 2010 at 16:04
Imagine a mobile app that's composed by an index.html and that has an iframe inside, loading contents. It's opened by a 'contained' browser, just like an app (more or less like phonegap does, just to give an example). — GuilhermeA
– GuilhermeA, Commented Sep 28, 2010 at 16:07

Ollie Edwards · Accepted Answer · 2010-09-28 15:58:00Z

1

window.top.foo

for the top level window

window.parent.foo

for the direct parent

answered Sep 28, 2010 at 15:58

Ollie Edwards

14.8k7 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

corymathews · Accepted Answer · 2011-12-19 20:02:44Z

1

I realize I am only a year late to this party but there was no real answer.

So, in order to do this both files must be on the same domain. Since you have the index.html on the phones localhost and load a page on your site it will not work (locahost to example.com). You could load the index.html off your site as well and that would fix this problem (example.com to example.com). Then you could reference the parent frame in the normal window.top.function.

answered Dec 19, 2011 at 20:02

corymathews

12.6k14 gold badges60 silver badges77 bronze badges

Comments

Lalit Kumar Maurya · Accepted Answer · 2013-12-04 04:46:09Z

In certain situation there could be a neccessity of calling a javascript function inside an iframe from the parent document, and vice versa ie; calling a javascript function in parent document from the iframe.

For example; the parent document have an iframe with id attribute ‘iFrameId‘, and the function ‘functionInIframe()‘ is defined in that iframe document. Following code can call that iframe function from the parent document itself.

document.getElementById('iFrameId').contentWindow.functionInIframe();

And following code can call the function defined in parent document(functionInParent()) from the iframe itself.

parent.functionInParent();

This way javascript can interact between parent document and iframe.

This is the original post.

Collectives™ on Stack Overflow

Call javascript method defined in parent from iframe

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related