<p>Setting up Event Listeners to Receive Messages</p>
<p>When a call to postMessage() is executed successfully a MessageEvent will be fired on the receiving window. You can use a standard event listener to watch for this event and execute some code when it occurs.</p>
<p>The event passed into the listener callback has a property called data that can be used to access the string or object that was sent by postMessage().</p>
<p>window.addEventListener('message', function(e) { <br>
  var message = e.data;  <br>
});</p>
//in thre iframe. Send a string or an object. SENDER
//***window.parent = donde enviar la info
window.parent.postMessage("tancirculaire('123');", "*");

//in the current website. Recive the info and use it. RECIEVER
window.addEventListener('message', function(e) {
  var message = e.data;
  console.log(e.data);
  //The event passed into the listener callback has a property called data that can be used to access the string or object that was sent by postMessage().
});

// NOT NEEDED check message compability with al browsers exam old ie fix
/*
// Create IE+ compatible event handler
var child_messages = document.getElementById('child-messages');
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventListener = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventListener(messageEvent, function(e) {
  var message = e.data;
  console.log(e.data);
  //child_messages.innerHTML += e.data;
}, false);
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.