Communicate from parent page to iFrame

For the communication between different windows, postmessage is surely a better solution than anything. I was trying the same thing from the iframe but id didn’t seem to work. So, i changed things by first i sent a message from playcanvas like this so that my window may know that playcanvas build is loaded:
window.top.postMessage("Playcanvas_Ready", "*");

And received it on the other window i.e iframe with the following function:

window.addEventListener('message', function(event) {
           // debugger;
            //alert(`Received ${event.data} from ${event.origin}`);
  // line 2  
        document.getElementById('playcanvasInput').contentWindow.postMessage('hello','https://playcanv.as');


            if(source ==null)
            {

               source=event.source;
               origin= event.origin;
            }
            //event.source.postMessage('Message received', event.origin);
            
         });

At line 2, i sent back the message to the playcanvas and here is how I receive it in playcanvas and it worked well. Remember the following code was outside of any function i.e initilize/update etc

function displayMessage (evt) {
    var message;
  

    console.log(evt);
    if (evt.origin !== "https://robertnyman.com") 
    {

        message = "You are not worthy";

    }
    else {

        message = "I got " + evt.data + " from " + evt.origin;

    }
    //document.getElementById("received-message").innerHTML = message;


}
if (window.addEventListener) {
    // For standards-compliant web browsers
    window.addEventListener("message", displayMessage, false);

}
else {
    window.attachEvent("onmessage", displayMessage);

}
1 Like