Connect web App with Playcanvas iFrame

Hello
I’m building a web php App which includes a Playcanvas project via iFrame. bit not communicating

playcanvas code :

window.addEventListener(“message”, function (event) { console.log(‘1’);

if (event.origin === "http://apicanvas.daruldev.com/") { // always check message came from your website
    var score = event.data.score;
    // call API method one:
    window.setScore(score);
    // call API method two:
    var app = pc.Application.getApplication();
    app.fire("score:set", score);
}

}, false);

web page code :

Document function iFramereload(){ var iframe = document.getElementById("app-frame");
        iframe.contentWindow.postMessage({
            score: 10,
        }, "https://playcanv.as/p/Po8lzmyn/");
    }              
        alert('342');              

</script>

Hi @Fahadi_Nadeem and welcome,

At a first glance I think your issue may be in the Playcanvas side, you need to listen to the parent or top window for messages.

Something like this:

window.top.addEventListener(...);

Also, when iframing a Playcanvas build is better to use the direct link to the iframe otherwise you will get multiple iframes and make it much harder to sweep the communication.

You can find that url by opening the build with the browser dev tools.

i have used https://playcanv.as/p/Po8lzmyn/ link in iframe are you talking about this one ? i am new in this so can you please explain
window top.addEventListener(…);

i am getting this when i added

window.top.addEventListener(“message”, function (event) { console.log(‘1’);

if (event.origin === "http://apicanvas.daruldev.com/") { // always check message came from your website
    var score = event.data.score;
    // call API method one:
    //window.setScore(score);
    // call API method two:
    console.log('2');
   // var app = pc.Application.getApplication();
   // app.fire("score:set", score);
}

}, false);

Uncaught DOMException: Blocked a frame with origin “https://playcanv.as” from accessing a cross-origin frame.
at https://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/pU4SNGCx/__game-scripts.js:1:113554

So, by default all Playcanvas builds work by using a default launcher app hosted in Playcanvas, and adding your app as an iframe to it:

To avoid having multiple iframes, you can use instead of that url, this one:

https://playcanv.as/index/pd9isyZq

So you will have a single iframe in your final wesite.

Each website and each iframe have their own window object instance. You need to target the correct one when listening to message from one to the other.

what about this ?

@Leonidas

having this problem ! can you please let me know ?

Are you using the iframed version? Try replacing the link from:

https://playcanv.as/p/Po8lzmyn/

to

https://playcanv.as/e/p/Po8lzmyn/

Note the extra /e before the /p

@yaustar
did it but not working saying
__game-scripts.js:1 Uncaught DOMException: Blocked a frame with origin “https://playcanv.as” from accessing a cross-origin frame.
at https://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/6NpbZXso/__game-scripts.js:1:113554

Hmm, I am using a similar setup on the following website and I don’t have any issue:

https://pirron.one/

Can you try enabling SSL to your parent website? I don’t think it’s a CORS issue since all Playcanvas build urls allow that.

1 Like

I’ve done a quick test with this project: https://playcanvas.com/editor/scene/973293

And the following HTML:

<html>
<head>
    <title>iframe test</title>
</head>
<body>
    <iframe src="https://playcanv.as/e/p/w3cOXu3C/" width="500px" height="500px" id='app'></iframe>
    <button onclick="(function() {
        var app = document.getElementById('app');
        app.contentWindow.postMessage('hello', '*');
    })()">test me </button>
</body>

</html>

Also works fine over HTTPS

Code taken from: https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site

1 Like

@Leonidas
@yaustar
thanks for help it works now !

1 Like