35

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?

1
  • please provide some snippets. How the methods are declared and the iframe constelation. Commented Aug 3, 2011 at 16:41

3 Answers 3

66

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

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

4 Comments

does this work in all browsers and is part of the javascript standard?
It's tested in IE, Chrome and FF. Not sure if it's written into the standards or not.
@Fallenreaper - NP, it's what this community is about. Proud to be a part of it.
Using parent.function(), does not work for me in IE. I solved this by using window.top in front. "window.top.function();"
34

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(); 

1 Comment

Nice trick! This actually works. I am not sure what is the difference between "window.myfunction = function()" and "function myfunction()". Any idea?
17

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:

3 Comments

1up for mentioning cross origin and a well accepted solution
This is one of the greatest coding methods
It's great for communicate between iframes you open for pages on other domains, cross-origin communication as it is

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.