使用 iframe-resizer 滚动嵌入在 iframe 中的 React 应用程序
Scrolling a React app embedded in an iframe using iframe-resizer
我使用 iframe-resizer 在 iframe 中嵌入了一个 React 应用程序:
<iframe id="my-frame" src="http://example.com/my-react-app" scrolling="no"></iframe>
<script>iFrameResize({}, 'my-frame')</script>
这总体上运行良好。但是,当嵌入式 React 应用程序从高页面切换到短页面时,React 应用程序可能会完全消失。我必须手动滚动到 iframe 的顶部才能再次看到该应用程序。有没有办法自动执行此操作?我在 iframe-resizer 文档中看到了 scrollTo
API,但我不清楚如何使用它。我是否必须更改我的 React 应用程序或嵌入它的页面?如何?如果可能的话,我宁愿完全不更改 React 应用程序。
祝你一切顺利。
当嵌入式应用程序移动到较小的页面时,iFrame 是否应该将自身调整为较小的高度?如果发生这种情况,则在这种情况下将不需要 scrollToTop。
前提是嵌入式应用使用 iframeResizer.contentWindow.js
我是不是漏掉了什么?
我现在已经为 iframe-resizer 编写了一个 React 接口,这可能有助于我将来处理类似的事情。
我使用 iframe-resizer 在 iframe 中嵌入了一个 React 应用程序:
<iframe id="my-frame" src="http://example.com/my-react-app" scrolling="no"></iframe>
<script>iFrameResize({}, 'my-frame')</script>
这总体上运行良好。但是,当嵌入式 React 应用程序从高页面切换到短页面时,React 应用程序可能会完全消失。我必须手动滚动到 iframe 的顶部才能再次看到该应用程序。有没有办法自动执行此操作?我在 iframe-resizer 文档中看到了 scrollTo
API,但我不清楚如何使用它。我是否必须更改我的 React 应用程序或嵌入它的页面?如何?如果可能的话,我宁愿完全不更改 React 应用程序。
祝你一切顺利。
当嵌入式应用程序移动到较小的页面时,iFrame 是否应该将自身调整为较小的高度?如果发生这种情况,则在这种情况下将不需要 scrollToTop。
前提是嵌入式应用使用 iframeResizer.contentWindow.js
我是不是漏掉了什么?
我现在已经为 iframe-resizer 编写了一个 React 接口,这可能有助于我将来处理类似的事情。