Game in iframe not capturing postMessage data after parent reload

Hi everyone,

I'm embedding my Construct 3 game in an iframe inside a parent webpage. I'm passing userId and orgId from the parent using postMessage, and I’m capturing it in the game using an addEventListener inside main.js (in the scripts folder of the exported project).

Everything works fine the first time—the game receives the data and stores it.

However, when I reload the parent page, the game doesn't capture the postMessage data again, even though I'm still sending it from the parent. It seems like the event listener in main.js isn't picking it up after a reload.

Here's what I've done:

In main.js, I've added:

	window.addEventListener("message", function (event) {
 // basic check
 if (event.data.userId && event.data.orgId) {
 console.log("Received:", event.data);
 // You can then store it or send to Construct
 window.userId = event.data.userId;
 window.orgId = event.data.orgId;
 }
});

Does the Construct game take time to load before it’s ready to receive messages?

It depends when you add the event listener in your code.

You might have a race between loading the parent page and loading the iframe. If one sends a message before the other is listening, it won't work (and will fail intermittently depending on how long loading works).

There are various strategies to deal with this - one for example might be to make sure the parent page is listening before the iframe is loaded, and then post a ready message from the iframe to the parent once the iframe is listening, after which the parent can safely post to the iframe. Another is just to post messages to the iframe regularly on a timer and send an acknowledgement back from the iframe once received, at which point the parent can stop posting.