从iframe内部调用父Javascript函数

Question

我有一个iframe(在我的域中),iframe有一个文件iframe.js.

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

我需要parent.js从一个函数中调用一个函数iframe.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)