How to send viewport to parent every time app is resized?

I try to receive the viewport from the iframe, and i'm using postMessage but i want to run this code every time app is resized.

Retool query

const newViewport = {...viewport}
parent.postMessage(newViewport, "*")

My app:

 window.addEventListener('message', (event) => {
     if ( {
 }, false);
   title="Retool App"
      height: `${height}px`;

Other testings:

  • i tried to use resize event with addEventListener but doesn't work apparently.
  • i tried to use iframe.contentWindow.document.body.scrollHeight but i was getting this error:
Blocked a frame with origin "http://localhost:8000" from accessing a cross-origin frame.

thank you for your help :slight_smile:

Hello, i found a way to get the height every time app is resized.

i used customComponent, i'm not sure if the best way but it's working for me

i added a useEffect to check the viewport, i set viewport global variable in the model state to receive it in the component, the code is something like that:

 React.useEffect(() => {
        type: 'resize',
        viewport: model.viewport
      }, '*')
    }, [model.viewport])

That's awesome! Thank you for sharing the question and the solution. Your code is working for you now? :crossed_fingers:

1 Like

yeah! it's working for me :slight_smile: