从 iframe 内部调用父 Javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6929975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call parent Javascript function from inside an iframe
提问by Ovi
I have a iframe (in my domain), that iframe has a file iframe.js.
我有一个 iframe（在我的域中），该 iframe 有一个文件iframe.js.
My parent document has a file parent.js.
我的父文档有一个文件parent.js.
I need to call a function that is in parent.js, from a function that is in iframe.js.
我需要parent.js从in 中的函数调用 in 中的函数iframe.js。
I tried doing window.parent.myfunction()this function is in the parent.jsfile.
我尝试window.parent.myfunction()在parent.js文件中执行此功能。
But, it didn't work. Only when I put the function on the parent page (I mean in the HTML), then it worked.
但是，它没有用。只有当我将函数放在父页面上（我的意思是在 HTML 中）时，它才起作用。
Any idea how to get this to work?
知道如何让它发挥作用吗？
回答by invertedSpear
Try just parent.myfunction(). Also be 100% sure that the parent.js is included in your parent document.
试试吧parent.myfunction()。还要 100% 确定 parent.js 包含在您的父文档中。
回答by Moses Machua
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
我知道这是一个老问题，但如果接受的答案不起作用（它对我不起作用），您可以在 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
现在从 iframe 你可以像你最初想要的那样调用myfunction()
window.parent.myfunction();
回答by Andrii Verbytskyi
Window.postMessage()method safely enables cross-origincommunication.
Window.postMessage()方法安全地启用cross-origin通信。
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.
如果您有权访问父页面，则可以传递任何数据，也可以直接从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)
- 跨文档消息传递 ( https://html.spec.whatwg.org/multipage/comms.html#web-messaging)
- Window.postMessage 方法（https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage）
- 我可以使用吗（http://caniuse.com/#search=postMessage）
