Unable to send message from Iframe to parent

muhammadtalha
muhammadtalha Member
in Domo Everywhere

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.

Tagged:

Answers

  • MattTheGuru
    MattTheGuru Contributor

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


    ** Was this post helpful? Click 💡/💖/👍/😊 below. **
    ** If it solved your problem. Accept it as a solution! ✔️ **

    Or do you need more help? https://calendly.com/matthew-kastner/15-minute-chat
    Did I help you out? Feedback is priceless and will help me more than you know.Write a review!

  • muhammadtalha
    muhammadtalha Member

    @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
    AJ_Herold Member

    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
    muhammadtalha Member

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

    });

Categories