从 iframe 内部调用父 Javascript 函数

Question

我有一个 iframe（在我的域中），该 iframe 有一个文件 iframe.js。

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

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

我尝试做window.parent.myfunction() 这个函数在parent.js 文件中。

但是，它没有用。只有当我将函数放在父页面上（我的意思是在 HTML 中）时，它才会起作用。

知道如何让它工作吗？

Answer 1

试试parent.myfunction()。还要 100% 确保 parent.js 包含在您的父文档中。

Answer 2

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

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

现在您可以像最初想要的那样从 iframe 调用 myfunction()

window.parent.myfunction(); 

Answer 3

Window.postMessage() 方法可以安全地启用cross-origin 通信。

如果您有权访问父页面，则可以传递任何数据，也可以直接从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)
• 我可以使用 (http://caniuse.com/#search=postMessage)