Skip to main content
Answer

Having trouble with Parent/iframe Message Posting in Lucid

  • August 28, 2023
  • 6 replies
  • 98 views

Iconduck

With respect to the Extension API calling `this.sendMessage` is not resulting in the iframe receiving the message. The code is being called from a class that extends `Panel`. The receiving iframe _does_ receive messages from the parent frame but not the ones I'm sending.

Here's some of the `extension.ts` code: https://pastebin.com/LnTGjp9C

The receiving frame's code is simple:

window.addEventListener('message' function(event) {
    console.log(arguments);
});

Here's a screenshot of the events that _are_ captured (but not the one I'm sending from the parent): 

https://s3.us-west-2.amazonaws.com/onassar.prod.02/screenshots/Screenshot%202023-08-28%20at%201.18.44%20PM.jpg

Best answer by Sayem W

Hi

I dug a little more into this and I believe the issue you're running into is because of a race condition. Any messages to the iframe will need to be sent after the frameLoaded() function has been called. This function is automatically called when the iframe has been constructed its srcdoc set and the window loaded event has fired. You can add protected frameLoaded(): void { console.log("Frame loaded"); } to your panel class & see when the frame has been loaded. Any messages after loading has completed should be received by the iframe.

We will update our documentation to make this behavior clear. Please let us know if this didn't solve the issue.

Comments

Iconduck
  • Author
  • August 28, 2023

I can't figure out why the iframe isn't receiving the events. Some possible scenarios I thought could be at play:

  1. Need to request permissions to pass down postMessage events
  2. Need to ensure the sendMessage is being passed to the correct iframe

Richard Udell
Forum|alt.badge.img+8
  • Lucid support team
  • August 28, 2023

Hi thank you for contributing to the Lucid for Developers Community these are excellent questions! A member of our development team will follow-up with you shortly in this thread.


Sayem W
  • Lucid product team
  • August 29, 2023

Hi

I believe this may be an issue with the way we are handling the html import. We have a new method of specifying the content that goes in a panel. Could you try doing it this way? You may also need to update your lucid-package & lucid-extension-sdk versions.

We will also look into fixing the bug with the legacy import.


Iconduck
  • Author
  • August 29, 2023

It looks like it might have been a race-condition. Adding a timeout of 2000ms resolved the issue (for now).


Sayem W
  • Lucid product team
  • Answer
  • August 29, 2023

Hi

I dug a little more into this and I believe the issue you're running into is because of a race condition. Any messages to the iframe will need to be sent after the frameLoaded() function has been called. This function is automatically called when the iframe has been constructed its srcdoc set and the window loaded event has fired. You can add protected frameLoaded(): void { console.log("Frame loaded"); } to your panel class & see when the frame has been loaded. Any messages after loading has completed should be received by the iframe.

We will update our documentation to make this behavior clear. Please let us know if this didn't solve the issue.


Iconduck
  • Author
  • August 29, 2023

Thanks I'll try that. That's more elegant and resilient.