Call parent Javascript function from inside an iframe

Question

I have a iframe (in my domain), that iframe has a file iframe.js.

My parent document has a file parent.js.

I need to call a function that is in parent.js, from a function that is in iframe.js.

I tried doing window.parent.myfunction() this function is in the parent.js file.

But, it didn't work. Only when I put the function on the parent page (I mean in the HTML), then it worked.

Any idea how to get this to work?

please provide some snippets. How the methods are declared and the iframe constelation. — jAndy, Aug 03 '11 at 16:41

score 65 · Accepted Answer · answered Aug 03 '11 at 16:51

65

Try just parent.myfunction(). Also be 100% sure that the parent.js is included in your parent document.

answered Aug 03 '11 at 16:51

invertedSpear

10,864
5
39
77

does this work in all browsers and is part of the javascript standard? – somid3 Jun 14 '12 at 15:29
It's tested in IE, Chrome and FF. Not sure if it's written into the standards or not. – invertedSpear Jun 14 '12 at 16:24
6

over a year later still helping people. Thanks. – Fallenreaper Aug 09 '12 at 16:20
7

@Fallenreaper - NP, it's what this community is about. Proud to be a part of it. – invertedSpear Aug 09 '12 at 16:46
2

Using parent.function(), does not work for me in IE. I solved this by using window.top in front. "window.top.function();" – Svenbjørn Kvilt Olsen Feb 01 '14 at 19:21

score 35 · Answer 2 · answered Jan 22 '14 at 02:01

35

I know this is an old question, but in case the accepted answer doesn't work (it didn't work for me) you could do this inside parent.js

window.myfunction = function () {
   alert("I was called from a child iframe");
}

Now from the iframe you can call myfunction() like you initially wanted

window.parent.myfunction();

answered Jan 22 '14 at 02:01

Moses Machua

11,245
3
36
50

Nice trick! This actually works. I am not sure what is the difference between "window.myfunction = function()" and "function myfunction()". Any idea? – Milacay Jul 27 '16 at 21:06

Andrii Verbytskyi · Answer 3 · 2017-01-13T08:15:30.127

Window.postMessage() method safely enables cross-origin communication.

If you have access to parent page then any data can be passed as well as any parent method can be called directly from Iframe.

Parent page:

if (window.addEventListener) {
    window.addEventListener("message", onMessage, false);        
} else if (window.attachEvent) {
    window.attachEvent("onmessage", onMessage, false);
}

function onMessage(event) {
    // Check sender origin to be trusted
    if (event.origin !== "http://example.com") return;

    var data = event.data;      
    if (typeof(window[data.func]) == "function") {
        window[data.func].call(null, data.message);
    }
}

// Function to be called from iframe
function parentFuncName(message) {
    alert(message);
}

Iframe code:

window.parent.postMessage({
    'func': 'parentFuncName',
    'message': 'Message text from iframe.'
}, "*");

References:

Cross-document messaging (https://html.spec.whatwg.org/multipage/comms.html#web-messaging)
Window.postMessage method (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
Can I Use (http://caniuse.com/#search=postMessage)

1up for mentioning cross origin and a well accepted solution — Fr0zenFyr, May 06 '17 at 05:24
It's great for communicate between iframes you open for pages on other domains, cross-origin communication as it is — espajava, Apr 07 '21 at 10:40

Call parent Javascript function from inside an iframe

3 Answers3

Linked

Related