Redirect parent window from Retool

App Building
#1

I need to redirect the parent window based on a custom html form submission from within Retool. Retool is hosted in an iframe on my webpage.

Trying to use window.top.location.href = "http://example.com"; causes the following error: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'http://example.com'.".

This is a pretty critical use case here and would love some ideas.

1 Like
How do I open another retool page after running a query?
#2

Hi @DakotaB! We have a utils.openUrl() function that lets you open a link either in a new tab or the same retool tab. If this url change is from a custom html component, you could trigger a Run JS Code type query from the customer component

#3

Hey @alex-w. Thanks for the response, I do know about the utility. The issue is that when Retool is iframed, it just changes the window location of the iframe rather than the parent window. Normally I could use something like
window.top.location.href = "http://www.example.com";
to redirect the parent window but that does not appear to work with retool.

#4

Hey @alex-w I am trying to use utils.openUrl() to redirect to my iOS app but I am getting the same as @DakotaB then when I try from a desktop, then from my mobile phone, I get that the URL I am redirecting to is un-safe. Is there a workaround? I know that using the built-in re-direct on a button click says that Retool only accepts certain protocols… is there a way around this?

#5

Did this ever get addressed? Or a workaround identified?

Modify top level document in public app?
#6

Hey @tradesorg_chris!

You can use postMessage and have a script in your parent app that adds an event handler that redirects to the URL sent from Retool. A barebones example of this is the following:

window.addEventListener(
   "message",
   (event) => {
     window.location.href = event.data;
  },
  false
);

Does that work?

1 Like
#7

how to target top location href?
nothing is working

#8

Hey @Electra!

You'll need to target the top location href from outside of Retool and then communicate the url via parent.postMessage API.

I've updated the link above with the correct documentation! If that doesn't work, would you mind sharing a bit about what you've tried so far?

#9

is parent.postMessage still broken on the latest retool runtime, as it was broken the last time I checked (3 weeks ago).

#10

Ah thanks for that callout @amydevs! I wasn't aware of it, will check in with the dev team and let you know here when that's fixed.

1 Like
#11

ty!

#12

This should be fixed in the new runtime as of 2.116.0!