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.
@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
