.postMessage() Example - Receiver

by Gerald Gillespie

HTML

<div id="console">
    Console
    <hr />
</div>

CSS

#console {
    min-height: 60px;
    background: #333;
    color: #eee;
    padding: 10px 10px 20px;
}

JavaScript

function receiveMessage(ev) {
    console.log("received");
    console.log(ev);
    //Check event.origin to see if it is a trusted sender.
    //If you have a reference to the sender, validate event.source
    //We only want to receive messages from sender, our trusted sender page.
  //  if (ev.origin !== "https://fiddle.jshell.net")
    //    return;

    //Validate the message
    //We want to make sure it's a valid json object and it does not contain anything malicious 
    var data;
    console.log(ev.data);
    try {
        data = JSON.parse(ev.data);
        //data.message = cleanseText(data.message) 
    } catch (ex) {
        return;
    }

    //Do whatever you want with the received message
    //We want to append the message into our #console div
    var p = document.createElement("p");
    p.innerText = (new Date(data.time)).toLocaleTimeString() + " | " + data.message;
    document.getElementById("console").appendChild(p);
}

window.addEventListener("message", receiveMessage);