I am constantly developing a score-based browser game which is hosted on itch.io. Therefore it would be nice to have a leaderboards. But it would be tedious to ask the players to enter their names if they are already logged in itch.io.
Thus it would be great if you could somehow pass the username into the iframe where the game is running. Maybe you could use Window.postMessage() to achieve this.
Thank you! :-)
Thank you for taking it into account! :-)
You should be done with the following two lines of code:
let frame = document.getElementById('your-iframe-id');
frame.contentWindow.postMessage(
/*JavaScript-variable containing the username as string*/,
/*itch-io-domain-address*/);
This way the current username is just always thrown via postMessage() into the iframe. The programmer of the game is then free to catch or ignore it. If he wants to catch it, he could do this with the following code:
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith(/*itch-io-domain-address*/)) {
// good case:
// The data was sent from itch.io.
// Data sent with postMessage is stored in event.data:
console.log(event.data); // Would print the username to the console.
} else {
// bad case:
// The data was NOT sent itch.io!
// Be careful! Do not use it. This else branch is here
// just for clarity, you usually shouldn't need it.
return;
}
});
I have stolen this idea and the source-code from here. ;-)
Of course you have to wait until the iframe is loaded before sending the message. Otherwise the games javascript-code would not be ready to catch it. E.g. you could add an event-listener to your iframe, so your code would look like:
let frame = document.getElementById('your-iframe-id');
frame.addEventListener("load", function () {
frame.contentWindow.postMessage(
/*JavaScript-variable containing the username as string*/,
/*itch-io-domain-address*/);
});