2-Wege-Kommunikation zwischen Iframes

Question

Ich bin mir der window.postMessage Methode für das Senden einer Nachricht an einen anderen Iframe voll bewusst, aber ich möchte eine Antwort aus dem Empfangsfenster erhalten, dass die Nachricht erfolgreich empfangen wurde. Ich mag es eher wie ein AJAX-Aufruf handeln, mit Erfolg und Misserfolg Rückrufen, so etwas wie diese:

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

ich natürlich verstehen, dass, wenn beide Iframes in der gleichen Domäne sind ich sie direkt zugreifen kann, aber es wäre nicht asynchron sein und es würde nicht den Fall abdecken, in dem sich die Iframes nicht auf derselben Domain befinden.

Also, ist es machbar?

Answer 1

postMessage ist Feuer und vergessen. Wenn Sie wissen möchten, ob die Nachricht empfangen wurde, muss das andere Dokument seine eigene Nachricht zurücksenden.

dh

1. Seite A sendet Nachricht an Seite B
2. Seite B-Ereignis-Listener, der ausgelöst wird, wenn er eine Nachricht Hörer sendet Seite Nachricht
   • Said Ereignis wird ein
3. Seite A hat einen Ereignis-Listener, der ausgelöst wird, wenn eine Nachricht empfangen wird

Answer 2

Sie könnten eine ID hinzufügen, um die Quelle klarer zu machen, jedoch können Sie nicht überprüfen, ob eine Verbindung fehlschlägt. Alternativ könnten Sie die andere Seite oft anpingen, um zu sehen, ob es sich um eine Verbindung handelt. Wenn Sie einen Fehler nicht brauchen, könnten Sie tun:

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

Verwendung wie: Sender:

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

Und auf der Empfängerseite:

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

Beide Seiten die gleiche ID verwenden müssen ...