Javascript 将iFrame大小调整器与React JS页面一起用作内容

我在外部CMS页面上有一个我的React页面的iFrame，但我想自动调整高度

我正在尝试使用此库： 但不幸的是我不能正确地实现它。。。我不知道在我的React项目中是否需要设置某些参数/调用函数，以及在哪里导入这个JS文件

我已尝试按照此处和某些在线教程中的说明进行操作：

但问题总是在于如何在主机页上实现它

我已将脚本包含在主机页中：

<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大小的主要方法。Rest是支持代码。如果你想的话，你可以用这个词。

---

注意：-这里的消息是来自iframe的事件。

即使我尝试使用iframe大小调整器，但在某些情况下它总是失败。所以我编写了自己的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大小的主要方法。Rest是支持代码。如果你想的话，你可以用这个词。

---

注意：-这里的消息是来自iframe的事件。

我刚刚为iframe Resizer准备了一个官方的react包装，它支持完整的API

---

我刚刚为iframe Resizer准备了一个官方的react包装，它支持完整的API

---

这也适用于第三方页面？那么基本上你只是创建了一个新组件，并在main.js中包含了setiframehight？或者你是如何让它工作的？setIframeHeight可以在任何iframe上工作。是的。在初始加载和设备定向时调用此函数。但此脚本必须包含在主机页上，对吗？所以，如果我的主机页是cms，这将不起作用？消费应用程序将有此代码来调整第三方iframe的大小。它的简单javascript应该可以在任何允许使用javascript的环境中工作。这也可以在第三方页面上工作吗？那么基本上你只是创建了一个新组件，并在main.js中包含了setiframehight？或者你是如何让它工作的？setIframeHeight可以在任何iframe上工作。是的。在初始加载和设备定向时调用此函数。但此脚本必须包含在主机页上，对吗？所以，如果我的主机页是cms，这将不起作用？消费应用程序将有此代码来调整第三方iframe的大小。它的简单javascript应该可以在允许javascript的任何环境中工作。