Timing and capture of HTMLComponent.onMessage()

Ask the community
,
1

Hi Experts;

I am hoping that others can comment on the htmlcomponent.onMessage handler capture events. In the following code, the htmlcomponent logs that it is ready before the page code sets its message handler. To my surprise, the message is nonetheless triggered by the event!

// Wix page code:
$w.onReady (() => {
  console.log("page code ready"); 
  $w("#iframehtml").onMessage(event => {
    if (event.data.type === 'notify_ready') {
      // ask the component for stuff etc
    }
  });   
  // ...


//Relevant HTMLComponent code:
  window.addEventListener('load',NotifyReady);   
  function NotifyReady () {
    console.log("html component ready and sending notify_ready");
    window.parent.postMessage({ type : "notify_ready" }, "*");
  }

Can anyone provide some insight into this? Is it just coincidence, or is this an expected behavior for the capture of onMessage events?

Thanks,
Jennifer

2

Have a read of the HTML Component in the Wix API reference and the onMessage and postMessage functions in it as it lists an example for both options.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#postMessage

https://support.wix.com/en/article/corvid-working-with-the-html-element

3

The question is about ensuring both the parent page and the html component are ready to send and receive messages. Please let me know if you saw anything in the links you posted about that; if so, then I am missing it. Otherwise, I’d prefer that if your input is nothing but links to Wix docs, don’t bother.