如何执行从 iframe 到主窗口的 javascript 调用？

Question

我需要使用 postMessage 从 iframe 到主窗口执行 javascript 调用 show();。 This answer 展示了如何使用postMessage，但没有展示如何在主窗口中调用函数。如何在主窗口调用函数？

Answer 1

我需要执行一个 javascript 调用“show();”使用 postMessage 方法从 iframe 到主窗口

您不能通过postMessage 调用函数。 postMessage 发布（发送）消息。消息可以导致目标窗口上的函数调用的唯一方法是目标窗口通过调用该函数来处理消息。

如果窗口在同一个原点

同源的窗口（见：SOP）可以互相访问，所以如果show是一个全局函数，iframe中的代码可以像这样称呼它：

parent.show();

如果窗口位于不同的原点

你不能直接在目标窗口中调用show()。该窗口中的代码必须这样做。

如果您可以控制目标窗口，则可以通过查看它发送的数据并在适当的情况下调用show()，让它响应一条消息（如链接问题的answer）。

但是如果没有目标窗口中的代码，你就无法做到这一点。

Answer 2

我帮助开发了一个名为 Endpoint.js 的项目（在 npm 和 bower.io 上作为“endpointjs”），它能够通过 iframe、窗口、选项卡、浏览器、服务器进程等包装远程对象。它的工作原理与以及跨域。

同源

要做你想做的事，你可以这样做（在父母身上）：

var adapter = window.endpoint.registerAdapter('window-object', '1.0', window);

然后，在 iframe 上你会这样做：

var facade = window.endpoint.createFacade('window-object','1.0', { neighborhood: 'group' });
facade.on('ready', function() {
    facade.getApi().show();
});

跨域

如果你是跨域的，那就有点复杂了。两边都要加跨域链接：

在 iframe 中：

var windowLinkConfig = {
    linkId: 'link-example0.com',
    type: 'window',
    settings: {
        origin: 'http://example0.com:80',
        external: true
    }
};
var link = window.endpoint.getConfiguration().addLink(windowLinkConfig);

link.announceWindow(window.parent);

在父级中：

var windowLinkConfig = {
    linkId: 'link-example1.com',
    type: 'window',
    settings: {
        origin: 'http://example1.com:80',
        external: true
    }
};
window.endpoint.getConfiguration().addLink(windowLinkConfig);

那么你必须稍微调整一下你的适配器以确保安全：

var adapter = window.endpoint.registerAdapter('window-object', '1.0', window, { neighborhood: 'universal' });

您可以查看有效的跨域示例here。您可能想要包装窗口对象并只公开您想要的方法......否则 iframe 将拥有对父窗口对象方法的完全访问权限。