从iframe调用父窗口函数

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 parentFunc(message) {
    alert(message);
}

iframe代码:

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

参考文献:

跨文档消息传递

Window.postMessage()

我可以用吗

我将此作为单独的答案发布,因为它与我现有的答案无关.

此问题最近再次出现,用于从引用子域的iframe访问父级,并且现有修补程序不起作用.

这次的答案是修改父页面的document.domain和iframe是相同的.这将欺骗相同的原始策略检查,认为它们共存于完全相同的域(子域被视为不同的主机并且未通过相同的原始策略检查).

将以下内容插入iframe中的页面以匹配父域(根据您的doctype进行调整).

请注意,这将在localhost开发中引发错误,因此请使用如下所示的检查来避免错误:

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.com";
} 

您可以使用

window.top

请参阅以下内容.