I made a example.
---
This is a simple counter page.
Demonstrates how to communicate between the iframe and Construct via postMessage() and addEventListener().
How to get/set Construct variables in the iframe
How to get/set iframe variables in Construct
Webpage
There is a text showing the counter,
and 2 buttons.
Button 1, updates the iframe count only.
Button 2, updates the iframe count and postMessage() to Construct, makeruntime to set the variable.
The iframe is also listening for an Event from Construct. and when it is triggered, it will update its counter to the parameter value.
- Preview
- html
<!DOCTYPE html>
<html>
<head>
<style>
#content {
display: inline-block;
border: 1px solid #FF0000;
padding: 6px;
}
</style>
</head>
<body>
<div id="content">
<p>Count: </p><div id="counter">0</div>
<button id="ButtonA">Set iframe Only</button>
<button id="ButtonB">Set C3 Both</button>
</div>
<script>
const appData = {
count: 0
};
const addCounter = (value = 1) => {
appData.count = Math.min(appData.count + value, 99);
displayText();
};
const setCounter = (value = 0) => {
appData.count = Math.min(value, 99);
displayText();
};
const displayText = () => {
document.getElementById('counter').innerText = appData.count;
};
const sendMessage = () => {
const target = window.location.origin;
window.parent.postMessage({ type: 'increment', value: appData.count }, target);
};
document.getElementById('ButtonA').addEventListener('click', () => {
addCounter(2);
});
document.getElementById('ButtonB').addEventListener('click', () => {
addCounter();
sendMessage();
});
window.addEventListener('changeDataFromC3', (event) => {
setCounter(event.detail.value || 0);
displayText();
});
document.addEventListener('DOMContentLoaded', () => {
displayText();
});
globalThis.appData = appData;
</script>
</body>
</html>
html
<html>
<head>
<style></style>
</head>
<body>
<div id="counter">0</div>
<button id="ButtonA"></button>
<script>
document.getElementById('ButtonA').addEventListener('click', () => {
window.parent.postMessage({ type: 'message', value: value });
});
</script>
</body>
</html>
const sendMessage = () => {
const targetOrigin = "*";
window.parent.postMessage({ type: 'message', value: data}, targetOrigin);
};
const appData = {
count: 0
};
globalThis.appData = appData;
Eventsheet
Load the page in Construct
Add Listener Events
const messageHandlers = {
increment: data => {
const { value } = data;
runtime.globalVars.Variable1 = value; // Set Construct Global Variable
console.log(`on message: ${value}`);
},
default: data => {
console.log(`no event: ${data.type}`);
}
};
const handleMessage = ({ data = {} }) => {
const { type } = data;
(messageHandlers[type] || messageHandlers.default)(data);
};
window.addEventListener('message', handleMessage);
runtime.signal("clear-input");
Some Event for Testing
Send Event to webpage
const value = 0;
const event = new CustomEvent('message', { detail: { value } });
window.dispatchEvent(event);
Get webpage data via globalThis
const key = localVars.key; // Construct Local Variable & Function Parameter
const value = globalThis.appData?.[key] ?? 0; // Set globalThis data
runtime.setReturnValue(value); // Set Function Return Value
{"is-c3-clipboard-data":true,"type":"events","items":[{"functionName":"getDataFromIframe","functionDescription":"","functionCategory":"","functionReturnType":"number","functionCopyPicked":false,"functionIsAsync":false,"functionParameters":[{"name":"key","type":"string","initialValue":"","comment":""}],"eventType":"function-block","conditions":[],"actions":[{"type":"script","script":"const value = globalThis.appData?.[localVars.key] ?? 0;\nruntime.setReturnValue(value);"}]}]}