Unable to send message from page code to HTML component

Ask the community
,
1

I am able to successfully send a message from HTML component to the page code but am unable to go the other direction.
The page code certainly executes this line:

$w("#mostRecentEpisode").postMessage("Send");

but the HTML component does not seem to read it as it never outputs to the console.

Here is the whole code:

HTML COMPONENT CODE


<!doctype html>
 <html>
 <head>
 <script type="text/javascript">
 function init () {
  window.parent.postMessage('READY', '*');
  window.onmessage = (event) => {
   if (event.data) {
    console.log("HTML Code Element received a message!");
   }
  }
 }
 </script>
 </head>
 <body onload="init()">
 </body>
 </html>

PAGE CODE

import {getLatestEpisode} from 'backend/spreakerModule';

let htmlDone = false;
$w.onReady(function () {
  $w("#mostRecentEpisode").onMessage(event => {
    if (event.data === "READY" && htmlDone === false) {
      $w("#mostRecentEpisode").postMessage("Send");
      getLatestEpisode().then(episode => {
       console.log(episode);
       $w("#mostRecentEpisode").postMessage("Send");
      })
      htmlDone = true;
    }
 })
});
2

Are you checking the browser’s console log? You won’t see the console.log from the HtmlComponent in the Editor’s developer console.