Javascript: postMessage()
Nachrichten zwischen parent und iframe(s)
Warum ich mich mit postMessage() beschäftige
remso-Mitgliedskalender und remso-Ortskalender können per iframe in fremde Webseiten eingebunden werden. Die Höhe der iframes kann sich aber nicht an das Dokument im iframe anpassen, ist entweder zu klein und bekommt Scrollbalken oder zu groß mit verschwendetem Platz.
Bisher hatte ich eine umständliche Lösung: Wenn das remso-Dokument im iframe fertig geladen ist, meldet es seine Höhe an den remso-Server, der ein Bild in gleicher Höhe erzeugt. Etwas zeitversetzt holt sich das Haupt-Dokument dieses Bild und bringt den iframe auf diese Höhe.
Übersetzung *) von Window.postMessage() und Kommentar
„Die Methode window.postMessage() ermöglicht auf sichere Weise eine ursprungsübergreifende Kommunikation zwischen Window-Objekten, z. B. zwischen einer Seite und einem von ihr erzeugten Popup oder zwischen einer Seite und einem darin eingebetteten Iframe.“
„message“ wird an ein bestimmtes window-objekt gesendet, z.B. parent.postMessage( text ); oder von parent an das erste iframe frame[0].postMessage( text );. In einer for- Schleife kann nacheinander an sämtliche iframes gesendet werden.
Iframes untereinander können sich keine Nachrichten schicken, aber parent kann Nachrichten empfangen und verteilen.
Jedes Window-Objekt, auch parent, kann senden, muss aber für den Empfang von Nachrichten vorbereitet werden:
window.addEventListener("message", function(messageEvent) {
if (messageEvent.origin == "http://osmer.de") {
document.getElementsByName("von_iframe")[0].value = messageEvent.data;
}
});
Normalerweise dürfen Skripte auf verschiedenen Seiten nur dann aufeinander zugreifen, wenn die Seiten, von denen sie stammen, das gleiche Protokoll, die gleiche Portnummer und den gleichen Host haben (auch bekannt als "same-origin policy"). window.postMessage() bietet einen kontrollierten Mechanismus, um diese Einschränkung sicher zu umgehen (wenn sie richtig eingesetzt wird).
Generell kann ein Fenster einen Verweis auf ein anderes erhalten (z. B. über targetWindow = window.opener) und dann mit targetWindow.postMessage() ein MessageEvent an dieses senden. Dem empfangenden Fenster steht es dann frei, dieses Ereignis nach Bedarf zu behandeln. Die an window.postMessage() übergebenen Argumente (d. h. die "Nachricht") werden dem empfangenden Fenster über das Ereignisobjekt mitgeteilt.
*) Übersetzt mit www.DeepL.com/Translator (kostenlose Version)