2012-11-27 8 views
11

Ich habe einige einbetten Code, den Benutzer auf ihren Websites setzen können. Es erstellt zwei untergeordnete Iframes auf der Seite. Ich möchte, dass diese Kinder kommunizieren können.Kommunikation zwischen zwei Iframe-Kindern mit postMessage

Ich verwende window.postMessagehttps://developer.mozilla.org/en-US/docs/DOM/window.postMessage

ist Javascript Da die beiden iframe Kinder nicht direkt miteinander kommunizieren können, ich bin für Nachrichten, die die Eltern als Relais verwendet wird. Das übergeordnete Element kann sich jedoch in einer anderen Domäne befinden, da es sich um einen einbettbaren Code handelt.

Wenn alle drei (Eltern und zwei Kinder) auf der gleichen Domäne sind, ist es ziemlich einfach, und ich habe diese Arbeit mit der Sicherheitsüberprüfung der e.origin Überprüfung meiner eigenen Website ist

# coffeescript 
# host = "http://www.mysite.com" 
host = "http://localhost" 

receive_message = (e) -> 
    console.log("received message from " + e.origin + ": " + e.data) 
    return if e.origin != host 

    if e.data == "show" 
    ... 
    else if e.data == "hide" 
    ... 

window.addEventListener("message", receive_message, false) 

Was eine elegante Weise ist um den Ursprung zu überprüfen, wenn der Elternteil auf irgendeiner Domäne sein kann?

Was ist eine gute Möglichkeit, das Debuggen des Skripts zu erlauben, wo der Ursprung localhost sein kann?

Ist es ausreichend, nur den Datenparameter zu überprüfen, wenn nicht zerstörerische/sich ändernde Nachrichten übertragen werden?

Danke!

Antwort

12

Warum sagen Sie, dass die untergeordneten Iframes nicht direkt kommunizieren können? Eigentlich können sie das. In einem Child-Iframe können Sie die Eigenschaft window.parent verwenden, um einen Verweis auf das übergeordnete Fenster abzurufen, und dann die frames -Eigenschaft des übergeordneten Elements verwenden, um Verweise auf alle untergeordneten Iframes abzurufen (die frames-Eigenschaft gibt Ihnen ein Array solcher Verweise). Danach können Sie für jede dieser Referenzen postMessage verwenden und im postMessage-Aufruf die erforderliche Ursprungsbeschränkung festlegen, damit Sie sicher sind, dass nur der richtige iframe die Nachricht erhält.

Beachten Sie, dass dies auch funktioniert, wenn alle drei Fenster (iframe1, übergeordnetes Fenster und iframe2) auf verschiedenen Domänen sind, weil iframe1 nichts mit dem übergeordneten Fenster tut (was gegen SOP verstoßen würde) iframes.

Links:

https://developer.mozilla.org/en-US/docs/DOM/window.parent

https://developer.mozilla.org/en-US/docs/DOM/window.frames

+1

Wow - Sie haben Recht! Ich kann nicht glauben, dass ich das vermisst habe, hatte keine Ahnung, dass Kinder iframes kommunizieren können. Hat super funktioniert, danke für die Hilfe! –

+0

Np, jederzeit. :) –

+0

@IvanZuzak, (iframe1, übergeordnetes Fenster und iframe2) sind auf verschiedenen Domains.Wie kann ich sicherstellen, iframe2 wird geladen, wenn ich parent.frames [1] .postMessage() in Iframe1-Code.Bein, wenn iframe2 nicht geladen ist , ruft postMessage() wird Fehler – wengeezhang