Search code examples
javascriptiframepostmessage

Pass Data From Iframe to grandparent

So essentially I have a tough case here. I have a react app that contains an iframe, and within that iframe I have data I need to get all the way to the react application. I have access to the code of the react app, and I have access to the code of the inner most iframe. I do not have access to the code of the middle iframe. If it's at all necessary to know I'm using an embedded looker dashboard with custom visualizations.

I have considered placing this into the inner most iframe

window.parent.postMessage({ message: "getAppData", value: MyDataToPass }, "*");

But would this work? Or could I do

window.parent.parent.postMessage({ message: "getAppData", value: MyDataToPass }, "*");

If there's a way to do this that'd be super helpful

Solution

  • So I poked around for barely any time at all. Using window.parent.parent.postMessage({ message: "getAppData", value: MyDataToPass }, "*"); As stated above was the answer, and listening for the message in the react app allowed me to access the data I needed.