Question

我完全了解用于向另一个iframe发送邮件的window.postMessage方法，但我想从接收窗口中检索邮件已成功接收的答案。我希望它更像是一个AJAX调用，成功和失败的回调，如下所示：

window.postMessage(myMessage)
      .success(mySuccessCallback)
      .failure(myFailureCallback);

我很明白，如果两个iframe都在同一个域中，我可以直接访问它们，但它不会是异步的，也不会涵盖iframe不在同一个域中的情况。

那么，它可行吗？

Answer 1

postMessage是火，忘了。如果您想知道是否收到了消息，那么另一个文档需要发回自己的消息。

即。

页面A向第B页发送消息
页面B具有在收到消息时触发的事件侦听器
- 所述事件监听器向页面A发送消息
页面A具有在收到消息时触发的事件侦听器

Answer 2

您可以为其添加ID，以使源更清晰，但是您无法检查连接是否失败。或者，您可以经常ping另一方，看看它们是否是连接。如果你不需要失败，你可以这样做：

var communicators={};
function communicator(id){
this.myid=id;
communicators[id]=this;
this.listeners=[];
}
communicator.prototype.post=function(data){
window.postMessage({data:data,id:this.myid});

 return this;
 }
communicator.prototype.done=function(func){
this.listeners.push(func);
return this;
}
communicators.prototype.fire(data){
this.listeners.forEach((listener)=>{listener(data)});
this.listeners=[];
}

window.addEventListener("message",function(event){
//todo: check event.origin
communicators[event.data.id].fire(event.data.data);
}

使用如下：发信人：

conn1=new communicator("broadcast");
conn1.post("Hi").done(function(data){
alert(data);
});

在接收方：

conn=new communicator("broadcast");
conn.done(func);

双方必须使用相同的身份......

iframe之间的双向沟通

2 个答案: