HTML: #html1
Text: #receivedMessages
Messages Received:
Button: #button1
Wix Page Component Code
// Configure message handler
$w.onReady(() => {
$w('#receivedMessages').text = "Messages Received:\n";
// when a message is received from the HTML Component
$w("#html1").onMessage( (event, $w) => {
addReceivedMessage(event.data);
} );
} );
// Update received message log
function addReceivedMessage(message) {
let newMessage = JSON.stringify(message);
$w('#receivedMessages').text += '\n'+newMessage;
}
// Send message to html component
function sendMessage(action, message, payload) {
if (action && message) {
let theMessage = {action:message};
if (payload) {
theMessage.payload = payload;
}
$w('#html1').postMessage(theMessage);
}
}
// Request OS Type from html component
export function button1_click(event, $w) {
// Ask html component for OS
sendMessage('action', 'OSInfo');
}
HTML Component Code
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.addEventListener('message', (event) => {
if (event.data) {
processMessage(event.data);
}
});
function htmlComponentReady() {
sendAction('htmlComponentReady');
}
function initialization () {
// when a message is received from the page code
htmlComponentReady();
}
function sendAction(action, payload) {
sendMessageToWixPage(action, 'action', payload);
}
function sendMessageToWixPage(message, type, payload) {
let key = (type ? type : 'error');
if (message) {
let theData = {};
theData[key] = message;
if (payload) {
theData.payload = payload;
}
window.parent.postMessage(theData, '*');
}
}
function sendError(error) {
sendMessageToWixPage(error);
}
function getOSInfo () {
// This script sets OSName variable as follows:
// "Windows" for all versions of Windows
// "MacOS" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS
let OSName = "Unknown OS";
let navigator = window.navigator;
if (navigator.appVersion.indexOf("Win") !== -1) {
OSName = "Windows";
}
if (navigator.appVersion.indexOf("Mac") !== -1) {
OSName = "MacOS";
}
if (navigator.appVersion.indexOf("X11") !== -1) {
OSName = "UNIX";
}
if (navigator.appVersion.indexOf("Linux") !== -1) {
OSName = "Linux";
}
return OSName;
}
​
function processMessage(message) {
if (message['action']) {
let action = message.action;
switch (action) {
case 'OSInfo':
{
logStatus('OSInfo');
sendAction('OSInfo', getOSInfo());
}
break;
default:
{
logStatus('No Action');
}
break;
}
}
}
</script>
</head>
<body onload="start();">
<p>HTML Component Loading...</p>
<div id='theStatus'></div>
<script type="text/javascript">
function logStatus(statusInfo) {
let message = document.getElementById('theStatus').innerHTML;
document.getElementById('theStatus').innerHTML = message +'<br>' +statusInfo;
}
function start () {
if (document.readyState === "complete") {
initialization();
}
}
</script>
</body>
</html>