使用iFrame Resizer和React JS页面作为内容

Posted 2021-03-27

我在外部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，而不是我在文档中读到的内容，但我不太确定这样做的正确方法是什么，现在文档让我感到困惑。所以如果有人能帮助我，我将非常感激！

答案

即使我尝试使用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的事件。