Having trouble with parent/iframe message posting

  • 28 August 2023
  • 6 replies
  • 14 views

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


Comments

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
Userlevel 3
Badge +7

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.

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.

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

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.

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

Reply