Skip to main content
Iconduck
Aug 28, 2023 8:18 PM UTC
Solved

Having trouble with Parent/iframe Message Posting in Lucid

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

Sayem W
Sayem WAnswer
Lucid product team
Aug 29, 2023 4:00 PM UTC

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
IconduckAuthor
Aug 28, 2023 8:20 PM UTC

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
Translate
Richard Udell
Lucid support team
Aug 28, 2023 11:37 PM UTC

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.

Translate
Sayem W
Lucid product team
Aug 29, 2023 3:48 PM UTC

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.

Translate
Iconduck
IconduckAuthor
Aug 29, 2023 3:50 PM UTC

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

Translate
Sayem W
Sayem WAnswer
Lucid product team
Aug 29, 2023 4:00 PM UTC

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.

Translate
Iconduck
IconduckAuthor
Aug 29, 2023 4:06 PM UTC

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

Translate