Language Changing with postMessage
1. HTML structure you need
You need two things on the page:
A <select> for language
An <iframe> that loads the trading platform
<select id="languageSelect" class="language-select">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="ru">Russian</option>
<option value="tr">Turkish</option>
<option value="zh-cn">Simplified Chinese</option>
<option value="zh-tw">Traditional Chinese</option>
<option value="ja">Japanese</option>
</select>
<iframe id="tradeFrame" src="LINK TO TRADE PLATFORM WITH SESSION"><
The parent page is the one that also talks to /balance, /balance/add, /game/select/1000x, etc.
TradeFrame.src is the URL that loads the platform with session and other params.
2. Track the iframe’s origin (critical for postMessage)
You must post only to the origin of the iframe (scheme + host + port), not a full URL.
Use following origin-detection pattern if needed
document.addEventListener("DOMContentLoaded", () => {
const iframe = document.getElementById("tradeFrame");
const langSelect = document.getElementById("languageSelect");
let IFRAME_ORIGIN = "*";
function updateIframeOrigin() {
try {
const origin = new URL(iframe.src).origin;
if (origin && origin !== "null") {
IFRAME_ORIGIN = origin;
console.log("[Origin Updated]", IFRAME_ORIGIN);
}
} catch (e) {
console.warn("[Origin detection failed, using *]");
}
}
updateIframeOrigin();
If later you change iframe.src (for example when selecting 1000x via /game/select/1000x), the load event handler (below) will update IFRAME_ORIGIN again.
3. Create a safe postMessage helper
So that you are sure the content is loaded in the iFrame
function safePostMessage(payload) {
try {
iframe.contentWindow.postMessage(payload, IFRAME_ORIGIN);
console.log("[POSTMESSAGE]", payload, "→", IFRAME_ORIGIN);
} catch (err) {
console.error("[postMessage failed]", err);
}
}All language messages will go through this.
4. On iframe load → push current language into it
As soon as the iframe finishes loading (or reloading, e.g. after switching to /game/select/1000x), detect the new origin and send the current language:
iframe.addEventListener("load", () => {
console.log("[iFrame fully loaded]");
updateIframeOrigin();
if (langSelect) {
const selectedLanguage = langSelect.value;
console.log("[Initial Language Sync]", selectedLanguage);
safePostMessage({
type: "languageSelect",
payload: selectedLanguage
});
}
});
So the iframe always starts in the correct language, not just after the user changes it manually
5. When the user changes language → send it to the iframe
Wire the dropdown change event:
if (langSelect) {
langSelect.addEventListener("change", function () {
const selectedLanguage = this.value;
console.log("[Language Changed]", selectedLanguage);
safePostMessage({
type: "languageSelect",
payload: selectedLanguage
});
});
}
});
That’s the core behavior:
One message type: "languageSelect"
Shape: { type: "languageSelect", payload: "<lang-code>" }
Sent:
On iframe load
On every language change