使用iframe-resizer滚动嵌入在iframe中的React应用

时间:2018-01-18 05:18:05

标签: reactjs 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应用程序。

2 个答案:

答案 0 :(得分:1)

希望你做得很好。

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

如果嵌入式应用程序使用的是iframeResizer.contentWindow.js

我错过了什么吗?

答案 1 :(得分:1)

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

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