javascriptreactjsiframeiframe-resizer

Scrolling a React app embedded in an iframe using iframe-resizer

I have a React app embedded in an iframe using iframe-resizer:

<iframe id="my-frame" src="http://example.com/my-react-app" scrolling="no"></iframe>
<script>iFrameResize({}, 'my-frame')</script>

This is working well in general. However when the embedded React app switches from a tall page to a short page, it is possible for the React app to go out of sight completely. I have to manually scroll to the top of the iframe to see the app again. Is there a way to do this automatically? I saw the scrollTo API in the iframe-resizer docs, but it's not clear to me how to use it. Do I have to change my React app or the page that embeds it? How? If possible, I would prefer not to change the React app at all.

Solution

  • Hope you are doing well.

    Shouldn't the iFrame resize itself to a smaller height when embedded app moves to a smaller page? If that happens, scrollToTop will not be needed in this case.

    Provided the embedded app is using iframeResizer.contentWindow.js

    Am I missing something?