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

Question

I need to execute a javascript call show(); from iframe to the main window using postMessage. This answer shows how to use postMessage, but not how to call a function on the main window. How can I call a function on the main window?

Answer 1

i need to execute a javascript call "show();" from iframe to the main window using postMessage method

You can't call functions via postMessage. postMessage posts (sends) a message. The only way that message can result in a function call on the target window is if the target window handles the message by calling that function.

If the windows are on the same origin

Windows in the same origin (see: SOP) have access to each other, so if show is a global function, code in the iframe can call it like this:

parent.show();

If the windows are on different origins

You can't call show() in the target window directly. Code in that window has to do it.

If you're in control of the target window, you can have it respond to a message (as in the linked question's answer) by looking at the data it sends and, if appropriate, calling show().

But you can't do it without code in the target window.

Answer 2

I helped develop a project called Endpoint.js (on npm and bower.io as 'endpointjs') which is capable of wrapping remote objects through iframes, windows, tabs, browsers, server processes, etc. It works with same as well as cross origin.

Same Origin

To do what you want, you could do so (on the parent):

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

Then, on the iframe you would do:

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

Cross Origin

If you are on cross origin, it's a bit more complicated. You have to add a cross-origin link on both sides:

in the 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);

In the parent:

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

Then you'd have to tweak your adapter a bit for security:

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

You can look at the working cross-origin example here. You might want to wrap the window object and only expose the methods you want ... otherwise the iframe would have full access to the parent window object's methods.