从子级(iframe)到父级的跨域通信不起作用

Question

我在一个页面上的AEM（Adobe Experience Manager-a cms）中有一个组件，我想使用iframe将此页面包含在另一个页面（来自不同域）中。因此，在组件的代码中，我使用window.postMessage()，并尝试在父级中侦听该事件。我试过用另一种方式沟通，作为iframe的家长，效果很好，但我需要用另一个方式沟通。因此，该组件是一个搜索组件，当你点击搜索结果时，我想重定向，但从父窗口，所以我试图发送URL重定向到，然后在父JS代码中处理重定向。

代码看起来像：

（来自父级-html）

<iframe
    width="1080"
    height="700"
    id="theFrame"
    src="http://localhost:4502/content/zebra1/global/en_us/hey.html#q=print"
    frameborder="0">
</iframe>

（来自父-js）

function receiveMessage(e)
{
    var key = e.message ? "message" : "data";
    var data = e[key];
    var redirect = JSON.parse(data);
    redirectUrl = (redirect.origin ? redirect.origin : '') + (redirect.url ?
    redirect.url : '');
    if (redirectUrl) {
        window.location.href = redirectUrl;
    }
}
window.addEventListener("message", receiveMessage, false);

（来自iframe/child-js）

goToSearchResults : function( event ){
    var windowOrigin        = location.origin;
    if( arguments[0].length == 3){
        var redirect = {
            origin: windowOrigin,
            url: arguments[0][1].url || ''
        };
        if(!$('#supportSearchWrap').data('iframe')) {
            location.replace(redirect.url);
        } else {
            window.postMessage(JSON.stringify(redirect), windowOrigin);
        }
    }
    logger.log( redirect.origin + redirect.url , this.model );
}

这对我不起作用。有人看到我做错了什么吗？或者有更好的方法吗？

Answer 1

window.postMessage-window指的是要向其发布消息的窗口对象的实例。在您的情况下，它应该是iframe窗口的父窗口
您可以使用window.parent或简单地使用parent在iframe中获取该引用。

此外，targetOrigin属性应该与目标窗口属性相匹配。从MDN文档来看，如下所示

targetOrigin指定要调度的事件的otherWindow的来源，可以是文本字符串"*"（表示没有首选项），也可以是URI。如果在计划调度事件时，otherWindow文档的方案、主机名或端口与targetOrigin中提供的不匹配，则不会调度事件；只有当三者都匹配时，活动才会被调度。