Not receiving data from postMessage in embedded iframe

Ask the community
,
2

Did you take a look into the VELO-API-Docs?

/* * * * * * * * * * * * * * * * * * * * * * * * *
 * Paste the following into the HTML Component:  *
 * * * * * * * * * * * * * * * * * * * * * * * * *

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "http://mysite.com");
}
</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>

 * * * * * * * * * * * * * * * * * * * * * * * * *
 * This is the page code:                        *
 * * * * * * * * * * * * * * * * * * * * * * * * */

$w.onReady(function () {
  // when a message is received from the HTML Component
  $w("#myHtmlComponent").onMessage( (event) => {
    console.log(`Message received by page code: ${event.data}`);
  } );
} );

export function messageSendButton_onClick() {
  // send message to the HTML Component
  $w("#myHtmlComponent").postMessage("Message from page code!");
}

Expand your code inside your HTML-Component, like shown in the EXAMPLE.