如何跨域postMessage？

Question

postMessage 的文档暗示跨域消息传递是可能的。然而：

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

这并没有非常清楚地说明如何实际做到这一点。

想象两个网站：

1. [父网站] 托管在 qc-a.nfshost.com 上
2. [子网站] 托管在 qc-b.quadhome.com

在父网站中：

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

并且，在孩子：

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

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

一切都无济于事。

帮助？

Answer 1

目前，我看到两个问题。代码中的轻微错误和超时问题。

1）我在您的代码中看到的错误是您正在使用 document.addEventListener。我认为正确的一个是window.addEventListener。它位于 postMessage 页面上的示例中。

2）随着超时，你可以让子窗口向父窗口postMessage。然后父窗口就会知道子窗口何时准备好。

Answer 2

你正在打开窗户&互相发布消息。打开的文档不可能准备好接受邮寄消息。尝试延迟 postMessage 调用，直到窗口完成加载。

测试这一点的一个非常简单的方法是将 w.postMessage() 包装在 setTimeout 中（10 秒），并查看当文档准备好时它是否可以发布它。