javascript - 如何将 iframe-resizer 与 React JS 页面作为内容一起使用？

Question

我有一个带有 iframe 的主机网页。我还有一个子页面，嵌入到主机的 iframe 中，这是一个 React 应用程序。我希望 iframe 的高度随着子页面的变化而自动调整。

我正在尝试使用 iframe-resizer调整父 iframe 的大小。我知道我需要包括 iframeResizer.contentWindow.min.js在子页面(我的 react 应用程序)中。我不知道在我的子 React 项目中我需要在哪里设置某些参数/调用函数以及我应该在哪里导入这个 JS 文件。

我已尝试按照此处和某些在线教程中的说明进行操作: https://github.com/davidjbradshaw/iframe-resizer

但始终只是如何在主机页面上实现它。

我已经在主机页面中包含了脚本:

<iframe id="my-iframe" src="https://myiframeurl.com" width="100%" frameBorder="0" scrolling="no"></iframe>
<script type="text/javascript" src="https://www.mycmsurl.com/IFrameResizer/Javascripts/iframeResizer.min.js">
</script>
<script type="text/javascript"> //<![CDATA[
jQuery('#my-iframe').iFrameResize({autoResize: true});
//]]></script>

如何在我的子/嵌入式 React 项目中正确包含 iFrameResizer.ContentWindow？

Answer 1

对于父 React 页面，我刚刚为支持其完整 API 的 iframe-Resizer 整理了一个官方 React 包装器。

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