Can't invoke a function in the child iframe by parent via postMessage() - cross origin

Question

I cannot get this CORS workaround to work in Chrome 52.0. My iframe and parent page are on different subdomains.

My iframe's event listener:

window.onload = function () {
    window.addEventListener("message", function(event) {
       //doesn't log it
       console.log('message');
       if(event.data === "invokeChildFunction()") {
           childFunction();
       }
    });
    function childFunction() {
        alert('Parent frame just invoked my function')
    }
}

The parent frame:

var iframeWindow = $('iframe').contentWindow;
var invokeChildFunction = function () {
  iframeWindow.postMessage("invokeChildFunction()", "https://mansion-assessment-sdimoff.c9users.io/CORS/index.html");
}

invokeChildFunction() doesn't log anything at the iframe's page

Answer 1

You should try using

In parent frame:

var iframe = $('iframe')[0];
iframe.contentWindow.postMessage('invokeChildFunction', iframe.contentWindow.location);

In child/iframe:

window.addEventListener('message', function (event) {
  if (event.data === 'invokeChildFunction') {
    // do whatever you want to
  }
})

What you did wrong was selecting elements with tag-name, on selecting elements with tag name you get an array of elements so you need to reference them as array.

Also use some validation to validate the source of events.