Linuchs: Wie verständigen sich Dokumente (im iframe) auf einer Webseite oder gar von Tab zu Tab im Browser?

Beitrag lesen

Hallo Rolf,

danke erstmal.

Mit deiner Hilfe habe ich nun das AHA-Erlebnis und ein Muster gemacht, wie sich Parent und Iframe gegenseitig Texte zusenden können. Ich schreibe den Code hier mal rein, vielleicht hilft es anderen Lesern.

let size = message.data;

let size = messageEvent.data;

iframe-Dokument "window_postmessage_iframe.php":

<body>
  <br>
  <p><l>an parent:</l>
  <input type=text name=an_parent title=an_parent value="Text an Parent" />
  <button onclick="sendeNachricht( document.getElementsByName('an_parent')[0].value )">senden</button></p>
  <br>
  <p><l>von parent:</l>
  <input type=text name=von_parent /></p>
</body>
<script>
// ***************************
// iframe sendet an parent
// ***************************
function sendeNachricht ( text ) {
  window.parent.postMessage( text );
}
// ***************************
// iframe empfängt vom parent
// ***************************/
window.addEventListener("message", function(messageEvent) {
  if (messageEvent.origin == "http://osmer.de") {
    document.getElementsByName("von_parent")[0].value  = messageEvent.data;
  }
});
</script>

parent-Dokument "window_postmessage.php":

...
  <p><l>an iframe:</l>
  <input type=text name=an_iframe title=an_iframe value="parent an iframe" />
  <button onclick="sendeNachricht( document.getElementsByName('an_iframe')[0].value )">senden</button></p>
  <br>
  <p><l>von iframe:</l>
  <input type=text name=von_iframe title=von_iframe value="" /></p>
...
  <iframe id=postmessage_iframe src="window_postmessage_iframe.php" style="width:100%;height:10em;"></iframe>
...
<script>
// ****************************************************
//  parent sendet an iframe.id = 'postmessage_iframe'
// ****************************************************
function sendeNachricht ( text ) {
  console.log( 'parent sendet: ***' +text +'***' );
  window.frames['postmessage_iframe'].contentWindow.postMessage( text );
}
// ***************************
// parent empfängt vom iframe
// ****************************/
window.addEventListener("message", function(messageEvent) {
  if (messageEvent.origin == "http://osmer.de") {
    document.getElementsByName("von_iframe")[0].value  = messageEvent.data;
  }
});
</script>

Gruß, Linuchs