Hi all,
I am going spare trying to get parent.postMessage functionality to work, I wondered if someone could help me. I am following the docs and trying to have my embedded retool app send data to the parent via parent.postMessage. I have tried this in multiple browsers to the same outcome. I also have turned on the Enable parent window communication functionality in beta settings.
I am using the below code (throwing the kitchen sink at the problem as you can see), which is triggered on a button press).
Do we need to supply a domain? If we do how would that work on a local build (eg 127.0.0.1). I am supplying all the options, the retool public shared link, the domain the app is embedded in and localhost.
parent.postMessage("HI BABYGIRL", "https://mysubdomain.mydomain.net")
parent.postMessage("HI BABYGIRL")
parent.postMessage("HI BABYGIRL", "https://xxx.retool.com/embedded/public/757848484848474-474974")
parent.postMessage("HI BABYGIRL", "127.0.0.1")
parent.postMessage("HI BABYGIRL", "http://127.0.0.1")
I am using the below methods to receive data:
const onRetoolDataReceived = (event: AnyIsOk) => {
console.log(event);
};
useEffect(() => {
onRetoolDataReceived(event);
}, [onRetoolDataReceived]);
window.addEventListener(
'message',
function (e) {
console.log('Parent window received: ', e.data, e);
},
false,
);
window.addEventListener('message', event => {
if (event.origin !== 'https://myretoolname.retool.com') {
// Check the origin of the message to ensure it's from your Retool instance
return;
}
if (event.data.eventType === 'retoolData') {
console.log('Data received from Retool:', event.data.payload);
// Process the received data as needed
}
});
And this is the embed:
<Retool
height="100%"
width="100%"
allow={'true'}
sandBox={'true'}
onData={(event: AnyIsOk) => {
console.log( event, event.data);
onRetoolDataReceived(event);
}}
url={
'https://mylink.retool.com/embedded/public/6484636393783-484864
}
/>
And I am receiving the below on render:
[Log] Parent window received: – "hello there" – MessageEvent {isTrusted: true, origin: "https://myretoolname.retool.com", lastEventId: ""} (routes.providers.c63350f8.js, line 1)
MessageEvent {isTrusted: true, origin: "https://myretoolname.retool.com", lastEventId: ""}MessageEventbubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldata: "hello there"defaultPrevented: falseeventPhase: 0isTrusted: truelastEventId: ""origin: "https://myretoolname.retool.com"ports: []Array (0)returnValue: truesource: Window {listeners: Object}WindowsrcElement: Window {listeners: Object}Windowtarget: Window {listeners: Object}WindowtimeStamp: 383926type: "message"MessageEvent Prototype
So it looks like it has the capability to work?
But when I trigger the javascript event, nothing happens when embedded (I get a trigger message when testing within retool however).
Can anyone help? It would be very much appreciated - I am just trying to get some text from a retool form.
Many thanks.
Chris