Skip to main content
Alex166
December 1, 2024
Question

How to Distinguish Which Prototype Sends Post Messages (EmbedKit 2.0)

  • December 1, 2024
  • 3 replies
  • 84 views

I have two prototype iframes integrated into my application. Both are sending events to the parent window using postMessage. However, I am struggling to identify which iframe (or prototype) is the source of a specific event because the messages only contain information like node-id and event type.

The issue is that event.source points to the iframe, but since the iframes are cross-origin, I can’t reliably distinguish which one is sending the message.

How can I determine the source of these messages? Ideally, I’d like to map each message to its corresponding iframe or prototype. Any suggestions or best practices for handling this kind of situation?

This topic has been closed for replies.

3 replies

tank666
December 1, 2024

Add a unique ID to each iframe and check iframes with the event source.

Something like this:

let iframeId;
if (event.source === document.getElementById('iframe1').contentWindow) {
    iframeId = 'iframe1';
}
else if (event.source === document.getElementById('iframe2').contentWindow) {
    iframeId = 'iframe2':
}

console.log(iframeId, event.data);
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Alex166
Alex166Author
December 2, 2024

Thanks for the reply. Unfortunately it doesn’t work. I am getting this type of error:
Uncaught TypeError: Cannot read properties of null (reading 'contentWindow')

I checked the object event.source and it’s null

tank666
December 2, 2024

Sorry, but I can’t confirm this from my side.

Have you added an id attribute to the iframes? Do the element IDs match the IDs in the script? Did you add this code to the onmessage event handler?

It looks like you’re trying to access a property of an element before it appears in the DOM, or the element with that ID doesn’t exist at all. So, make sure the script is only executed after the iframes appear in the DOM, and that the id value is correct.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank