Question

我在页面上的AEM（Adobe Experience Manager - 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 docs，如下所示。

<强> targetOrigin 指定要调度的事件的otherWindow的原点，可以是文字字符串“*”（表示没有首选项），也可以是URI。如果在计划调度事件时，otherWindow文档的方案，主机名或端口与targetOrigin中提供的方案，主机名或端口不匹配，则不会调度该事件;只有当所有三个匹配都将调度该事件时。

从Child（iframe）到Parent工作的跨域通信

1 个答案: