Call parent Javascript function from inside an iframe
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.myfunctio开发者_开发技巧n()
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?
Try just parent.myfunction()
. Also be 100% sure that the parent.js is included in your parent document.
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();
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)
精彩评论