Sending message back with postmessage

Question

I am currently making an application where it is neccessary to send information between two domains (will be on loading of the page).

Website 1: Creates iFrame > Sends Postmessage to website 2

window.onload =  function () {

iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "WEBSITE 2");
iframe.style.width = "200px";
iframe.style.height = "200px";
iframe.style.border = "none"; //please do not show the iframe JS.
 iframe.id = "lol";
document.body.appendChild(iframe);
document.getElementById("test").innerHTML = "Test!"
window.addEventListener("message", listener, false);

window.setTimeout(sendMessage,100)
}
function sendMessage(e) {
  var receiver = document.getElementById('lol').contentWindow;
receiver.postMessage('Hello Treehouse!', 'WEBSITE 2');
}

function listener(event){
if ( event.origin !== "WEBSITE 2" )
return //website isn't ours bro

  document.getElementById("test").innerHTML = event.data

}

Website 2 Gets Postmessage from website 1 > Create iFrame (?) > Sends Postmessage to website 1 (?)

window.onload =  function createiframe() {
 window.addEventListener("message", listener, false);
}

function listener(event){
  if ( event.origin !== "WEBSITE 1" )
  return //website isn't ours bro

  document.getElementById("test").innerHTML = event.data

  window.setTimeout(createiFrame,1000)
}
  function createiFrame() {
 iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", "WEBSITE 1");
  iframe.style.width = "230px";
  iframe.style.height = "203px";
  iframe.style.border = "none"; //please do not show the iframe JS.
  iframe.id = "lol";
  document.body.appendChild(iframe);
  document.getElementById("test").innerHTML = "Test!"
  window.setTimeout(sendMessage,1000)
  }
  function sendMessage(e) {
         var receiver = document.getElementById('lol').contentWindow;
    receiver.postMessage('Hello ', 'WEBSITE 1');
    console.log('Message sent')
  }

The iFrame is created on website 2, whereafter a loop is made with Website 1 and Website 2, however the Postmessage that is sent from Website 2 to Website 1 is shown in the extra iFrame, is it possible to sent a message back to the website 1 opened in the browser?

Example of what is shown:

Test! Test! Hello Test!

Thanks!

score 16 · Answer 1 · answered May 15 '19 at 16:22

To respond to the Event.origin domain, you have at your disposition the message's Event.source

// Child website:
window.addEventListener("message", evt => {
    // if (evt.origin !== "http://example.com") return;

    console.log(evt.data) // "Question!"
    evt.source.postMessage("Response!", evt.origin);
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#The_dispatched_event

source
A reference to the window object that sent the message; you can use this to establish two-way communication between two windows with different origins.

score 5 · Accepted Answer · answered Aug 06 '14 at 15:25

If I'm looking at this right, in Website 2 in the sendMessage() function, it looks like you are getting the newly created iframe element, and then posting a message to it. Where in reality you really want to post a message to website 1.

From website 2...try something like

window.parent.postMessage("hello website 1", "*");

Sending message back with postmessage

2 Answers2

Linked