将 iFrame Resizer 与 React JS 页面用作内容

Question

我在外部 CMS 页面上有我的 React 页面的 iFrame，但我希望自动调整高度。

我正在尝试使用这个库：https://github.com/davidjbradshaw/iframe-resizer 但不幸的是我无法正确实现它......我不知道在我的 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 项目中的某处调用 iFrameResizerContentWindow，但我不太确定这样做的正确方法是什么，现在文档让我感到困惑一点点。因此，如果有人可以帮助我，将不胜感激！

Answer 1

我刚刚为支持其完整 API 的 iframe-Resizer 组装了一个官方反应包装器

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

Answer 2

即使我尝试使用 iframe-resizer，但总有一些情况会失败。所以我编写了自己的 javascript 来调整 iframe 的大小，它工作正常，并且不依赖第三方库。

  // region react lifecycle methods
  componentWillMount () {
    // Detect whether device supports orientationchange event, otherwise fall back to the resize event
    let supportsOrientationChange = 'onorientationchange' in window
    let orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'
    if (window.addEventListener) {
      window.addEventListener('message', this.checkSender)
      window.addEventListener(orientationEvent, this.setIframeHeight)
    } else if (window.attachEvent) {
      window.attachEvent('message', this.checkSender)
      window.attachEvent(orientationEvent, this.setIframeHeight)
    }
  }

  componentWillUnmount () {
    window.removeEventListener('message', this.checkSender)
    let supportsOrientationChange = 'onorientationchange' in window
    let orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'
    window.removeEventListener(orientationEvent, this.setIframeHeight)
  }
  // endregion

  // region custom methods.
  setIframeHeight = () => {
    try {
      let iframe = document.getElementById(iframeId)
      if (iframe) {
        let iframeWin = iframe.contentDocument || iframe.contentWindow
        if (iframeWin && iframeWin.getElementById('root')) {
          iframe.style.height = iframeWin.getElementById('root').offsetHeight + 'px'
        }
      }
    } catch (e) {
      console.error('Resizing method call', e)
    }
  }

  checkSender = (e) => {
    e.preventDefault()
    // error added or removed in iframe
    if (e.data.msg === 'validationChanged') {
      this.setIframeHeight()
    }
  }
  // end region

这里setIframeHeight是调整iframe大小的主要方法。休息是支持代码。如果需要，您可以使用参考。 注意：- 这里的消息是来自 iframe 的事件。