使用 iframe-resizer 滚动嵌入在 iframe 中的 React 应用程序答案

【问题标题】：Scrolling a React app embedded in an iframe using iframe-resizer使用 iframe-resizer 滚动嵌入在 iframe 中的 React 应用程序
【发布时间】：2021-05-19 21:32:08
【问题描述】：

我有一个使用 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 应用程序。

【问题讨论】：

标签： javascript reactjs iframe iframe-resizer

【解决方案1】：

希望你一切顺利。

当嵌入式应用程序移动到较小的页面时，iFrame 不应该将自身调整到较小的高度吗？如果发生这种情况，在这种情况下将不需要 scrollToTop。

如果嵌入式应用正在使用 iframeResizer.contentWindow.js

我错过了什么吗？

【讨论】：

嗨普拉纳夫！你是对的，iframe 会自行调整大小，但是包装页面的滚动条不会改变它的位置，所以它看起来好像 iframe 已经消失了。我必须向上滚动才能将 iframe 重新显示出来。是的，嵌入式反应应用程序确实使用 iframeResizer.contentWindow.js。一切正常。我可以看到 iframe-resizer 日志等。
嗨 Naresh，可能会调整大小回调将起作用。它提供了 iFrame 对象，我们可以在该对象上调用 scrollIntoView。
谢谢，普拉纳夫。 resizedCallback 成功了。在这个回调中，我只是将元素滚动到视图中：resizedCallback: function(messageData) { var element = document.getElementById(messageData.iframe.id); element.scrollIntoView(); }。希望这可以帮助遇到同样问题的其他人。

【解决方案2】：

我现在已经为 iframe-resizer 编写了一个 React 接口，这可能对我未来的类似事情有所帮助。

https://github.com/davidjbradshaw/iframe-resizer-react

【讨论】：

感谢大卫。一定会去看看的。