How can I do cross-domain postMessage?

Question

The documentation for postMessage implies that cross-domain messaging is possible. However:

// When the popup has fully loaded, if not blocked by a popup blocker

That isn't a very clear note of how to actually do it.

Imagine two websites:

1. [Parent] hosted on qc-a.nfshost.com
2. [Child] hosted on qc-b.quadhome.com

In the parent:

document.addEventListener('message', function(e) {
  alert('Parent got (from ' + e.origin + '): ' + e.data);

  e.source.postMessage('Round-tripped!', 'http://qc-b.quadhome.com');
}, false);

function go() {
  var w = window.open('http://qc-b.quadhome.com', 'test');

  /* This doesn't work because same-origin policy prevents knowing when
     the opened window is ready. */

  w.postMessage('Vain attempt.', 'http://qc-b.quadhome.com');
}

And, in the child:

document.addEventListener('message', function(e) {
  alert('Child got (from ' + e.origin + '): ' + e.data);
}, false);

window.opener.postMessage('Ready!', 'http://qc-a.nfshost.com');

All to no avail.

Help?

Answer 1

Currently, I am seeing two issues. Slight error in the code and the timeout issue.

1) The error I am seeing in your code is that you're using document.addEventListener. I think the right one is window.addEventListener. It is in the example on the postMessage page.

2) With the timeout, you can have the child window postMessage to the parent. The parent window will then know when the child is ready.