PlayCanvas Hosting and postMessage

I’m experimenting with javascript’s postMessage command with PlayCanvas. (see code below).

All I am doing in the code below is loading a PlayCanvas app into an iframe and using a button on the host page to send a message to the PlayCanvas app. When the app recieves the message it hides/shows the 3D object.

This works fine when I download the PlayCanvas app code and web host it in IIS. The problem comes when I try to send a message to a app hosted on PlayCanvas. (It’s unclear if we want to host the application ourselves or have PlayCanvas host it)

Is PlayCanvas hosting blocking postMessage somehow or might it be because PlayCanvas already hosts the actual application in an iframe?

Javascript Code on the page that contains an iframe with the PlayCanvas application:

function btnClick(){
	var iframe = document.getElementById('pc');
	iframe.contentWindow.postMessage('message_text', '*');	
}

PlayCanvas Script:

pc.script.create(‘ui’, function (app) {
// Creates a new Ui instance
var Ui = function (entity) {
this.entity = entity;
};

Ui.prototype = {
    // Called once after all resources are loaded and before the first update
    initialize: function () {
        
        var capsule = app.root.findByName("Capsule");
        
        //querystring test
        this.qs_val = window.location.toString().split('=')[1]; //querystring
        if(this.qs_val){
            console.log(this.qs_val);
        }
        
        //respond to messages test
        this.messaging_test = function(e) {
            console.log(e.data);
            capsule.enabled = !capsule.enabled;
        };
        
        //listen for message test
        window.addEventListener('message', this.messaging_test, false);
        
    },

    // Called every frame, dt is time in seconds since last update
    update: function (dt) {
    }
};

return Ui;

});

Ugh…nm. I figured it out. it was the iframe issue so I changed the iframe src to the location of the inner iframe (http://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/l6BS3Bkz/index.html) instead of the parent link (http://playcanv.as/p/eK8mM44o) and it worked.

If you can, please use the embed link which is same as the project link but with a leading /e. E.g. http://playcanvas.as/e/p/123456

That link will survive if we find we need to move content on our server.

2 Likes

Dave,

Awesome, that works too. Thanks!

JEH

Sorry for bumping this up again but I’m having trouble getting the message delivered.

This is the code on the button callback:

var msg = {
        animation: 'hello',
        entity: 'Person'
    };
var iframe = document.getElementById("pcFrame");
var y = (iframe.contentWindow || iframe.contentDocument);
y.postMessage(JSON.stringify(msg), 'http://playcanv.as/p/PROJECT_ID');

the iframe is defined as:

<iframe id="pcFrame" src="http://playcanv.as/p/PROJECT_ID"></iframe>

and inside one of my scripts I put:

function listener(e){
   //I removed the origin check but will add it later
    console.log("--> MESSAGE");
    var msg = JSON.parse(e.data);
    console.log(msg.animation);
    console.log(msg.entity);
}

console.log("START");
window.addEventListener('message',listener,false);

Problem is that nothing happens. No error. No message. No console.log() from the listener function.

Any clue?

Quick note.

If I call

window.postMessage('{"message": "HI"}', 'http://playcanv.as/p/PROJECT_ID');

right after the addEventListener() call the function is nicely called.
Can it be that on the hosting page I’m calling .postMessage() on the wrong element of the iframe?

EDIT:

Ok it works if I use the URL of the inner frame as stated by the original poster. I’m using

http://playcanv.as/index/SsH8Gsv0

is it correct? is this URL going to change throughout the lifespan of my project?

Hi Dave,

Just an FYI, the docs need updating about this leading /e src url for the iframe - https://developer.playcanvas.com/en/user-manual/publishing/web/communicating-webpage/.

I was debugging this for a while now and only figured it out from your post.

Cheers!

1 Like