无法通过postMessage() - 跨源来由父级调用子iframe中的函数

Question

我无法让这个CORS解决方法在Chrome 52.0中起作用。我的iframe和父页面位于不同的子域名下。

我的iframe事件监听器：

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

父级框架:

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

invokeChildFunction()在iframe页面上不记录任何日志

- Svetan Dimoff

---

将 window 分配给 var window = $('iframe').contentWindow; 的目的是什么？ - guest271314

@guest271314，我正在尝试引用iframe窗口。还有其他方法吗？ - Svetan Dimoff

尝试使用除了window之外的标识符以避免混淆。window是否具有不同的起源？ - guest271314

好的，我会将它更改为iframe。然而，这并不能解决问题。当我从子页面发送时，它是可以工作的。是的，这应该能够在跨域环境下工作。 - Svetan Dimoff

Answer 1

您应该尝试使用

在父级框架中：

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

在子页面/iframe中：

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

你做错的事是选择了带有标签名的元素，当你选择带有标签名的元素时，你会得到一个元素数组，因此需要将它们作为数组引用。

同时，使用一些验证方法来验证事件源。

- Avi

---

如果像 OP 所述，我的 iframe 和父页面位于不同的子域中，这个方法是否有效？ - Gervase

是的，window.postMessage可以用于在不同子域之间的页面通信。您可以查看此链接以获取更多澄清信息。 - Avi