Unable to send message from Iframe to parent

muhammadtalha · 2024-05-08T18:00:50+00:00

There was an error rendering this rich post.

I am using window.postMessage() to do a communication between iframe and my custom parent app where I have embedded domo dashboard.

Sending from DOMO DDX Brick:

const message = "Message from child DOMO Brick";

window.parent.postMessage(message, "*");

And in my app I am getting it like this(where my dashbiard is embedded),

window.addEventListener('message', function (event) {

console.log("Message received from the child: " + event.data);

// Message received from child

});

But this event is not firing. I am firing this event on the domo.onFiltersUpdate((e) => {}) function to fire this everytime. But its not even firing once.

Find more posts tagged with

Domo Everywhere

Domo Bricks

Domo for Good

Accepted answers

All comments

MattTheGuru

Your issue is with the: window.parent.postMessage(message, "*");

Domo won't approve of the "*" you need to do the following:

// Replace "https://clearsquare-co-partner.domo.com" with the origin of the parent
window.parent.postMessage(message, "https://clearsquare-co-partner.domo.com");

muhammadtalha

@MattTheGuru Thanks for this.

I actually resolved this by just changing parent to top.

so it became, window.top.postMessage(), I think the issue was with parent and child iframe window.

AJ_Herold

Can someone explain where this is being done on the DOMO side? I want to do something similar but don't know how to implement this on the DOMO side to then receive the message in my parent.

muhammadtalha

@AJ_Herold I implemented that, so you need to do the following two things to receive message in your parent from iframe.

1- send postmessage() from your iframe with a syntax like below:

let message= 'less_then_10';

window.top.postMessage(message, "*");

2: You need to make an event in your parent where you are using that iframe, to listen to this event like:

// Listen to message from child window

eventer(messageEvent, function(e)

{ // console.log('Event data : ', data);

var data = e.data; //run function//

console.log('Event data : ', data);

});