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

时间:2016-01-06 07:14:12

标签: javascript html iframe postmessage

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

2 个答案:

答案 0 :(得分:1)

  

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

您无法通过INSERT INTO QUERY (date_time, userid, user_traits, query_sql, STATUS, description, is_scheduled_row) VALUES ('2016-01-06 02:39:01', '307', '0,3598,1937,13891,37746,22082,2596,2431,12850,3917,1234784,44712,14638,14418,12850,2631,25003,11428,27450,2592,23593,11441,2826,36330,32219,32351,20720,13997,2594,2467,15687', 'Select * from gl_base_schema.item where national_status_cd = \'A\'', 'in queue', ' (Scheduled Query #413) Pull all items where National Status Code is \'A\'', 1); 致电功能。 postMessage发布(发送)消息。消息可以导致目标窗口上的函数调用的唯一方法是目标窗口通过调用该函数来处理消息。

如果窗口位于同一个原点

同源中的Windows(请参阅:SOP)可以相互访问,因此如果postMessage全局功能,则代码在iframe中可以像这样调用它:

show

如果窗口位于不同的来源

您无法直接在目标窗口中调用parent.show(); 。该窗口中的代码必须这样做。

如果您控制了目标窗口,则可以让它通过查看发送的数据来响应消息(如链接的问题answer),如果适当的,呼叫show()

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

答案 1 :(得分:0)

我帮助开发了一个名为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();
});

Cross Origin

如果你是跨性别的,那就有点复杂了。您必须在两侧添加跨源链接:

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将具有对父窗口对象方法的完全访问权。