从iframe内部调用父级Javascript函数

Question

我有一个在我的域中的 iframe，这个 iframe 有一个文件叫做iframe.js。

我的父级文档有一个文件叫做parent.js。

我需要从iframe.js中的一个函数调用在parent.js中的函数。

我尝试使用window.parent.myfunction()，这个函数在parent.js文件中。但是它没有起作用。只有当我将这个函数放在父页面上（我的意思是在HTML中），然后它才起作用了。

有什么办法可以让它起作用吗？

- Ovi

---

请提供一些代码片段。方法如何声明以及iframe的组合。 - jAndy

Answer 1

尝试使用 parent.myfunction()。同时确保在您的父文档中已包含 parent.js。

- invertedSpear

---

这在所有浏览器中都有效，并且是JavaScript标准的一部分吗？ - somid3

它已在IE、Chrome和FF中进行了测试。不确定是否符合标准编写。 - invertedSpear

一年后仍在帮助人们。谢谢。 - Fallenreaper

@Fallenreaper - 没问题，这就是这个社区的精神。我为能成为其中的一员感到自豪。 - invertedSpear

在IE中，使用parent.function()对我无效。我通过在前面使用window.top来解决这个问题。"window.top.function();" - Svenbjørn Kvilt Olsen

Answer 2

我知道这是一个老问题，但如果被接受的答案不起作用（对我没用），你可以在 parent.js 中执行此操作。

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

现在你可以像最初想的那样，从iframe中调用myfunction()

window.parent.myfunction(); 

- Moses Machua

---

不错的技巧！这真的有效。我不确定"window.myfunction = function()"和"function myfunction()"之间有什么区别。你有什么想法吗？ - Milacay

Answer 3

Window.postMessage() 方法可以安全地启用 跨域 通信。

如果您可以访问父页面，则可以传递任何数据，以及直接从 Iframe 调用任何父级方法。

父页面:

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代码：

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

参考资料:

• 跨文档消息传递 (https://html.spec.whatwg.org/multipage/comms.html#web-messaging)
• window.postMessage 方法 (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
• Can I Use (http://caniuse.com/#search=postMessage)

- Andrii Verbytskyi

---

感谢您提到跨域访问和一种被广泛接受的解决方案，这值得赞赏。 - Fr0zenFyr

这是最优秀的编码方法之一。 - Mimouni

它非常适合在打开其他域上的页面时，在iframe之间进行通信，即跨源通信。 - espajava