Unable to send message from Iframe to parent

muhammadtalha

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.

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);


});