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

Queries and Resources
,
1

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 (event.data) {
       setHeight(event?.data?.height);
     }
 }, false);

 <iframe
   title="Retool App"
   src={retoolURL}
   style={{
      height: `${height}px`;
   }}
   frameBorder="0"
 />

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:

2

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(() => {
      console.log({viewport:model.viewport})
      window.top.postMessage({
        type: 'resize',
        viewport: model.viewport
      }, '*')
    }, [model.viewport])
2 Likes
3

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

1 Like
4

yeah! it's working for me :slight_smile:

5