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

how can i execute a javascript call from iframe to the main window?

本文关键字：窗口 调用 javascript iframe 何执行 执行      更新时间：2023-09-26

我需要使用postMessage执行从iframe到主窗口的javascript调用show();。这个答案显示了如何使用postMessage，但没有显示如何在主窗口上调用函数。如何调用主窗口上的函数？

我需要使用postMessage方法执行从iframe到主窗口的javascript调用"show（）；"

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

如果窗口在同一原点上

同源中的窗口（请参阅：SOP）可以相互访问，因此如果show是全局函数，则iframe中的代码可以这样调用它：

parent.show();

如果窗口位于不同的原点

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

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

但是，如果没有目标窗口中的代码，就无法执行此操作。

我帮助开发了一个名为Endpoint.js的项目（在npm和bower.io上称为"endpointjs"），该项目能够通过iframe、windows、tab、浏览器、服务器进程等包装远程对象。

同源

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

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.nannounceWindow（windowparent）；

在父级中：

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' });

您可以在这里查看跨原点工作的示例。您可能想要包装窗口对象，并且只公开您想要的方法。。。否则iframe将完全访问父窗口对象的方法。

相关文章：