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

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

Answer 2

我刚刚为支持iframe-Resizer的正式反应包装提供了支持，该包装支持其完整的API

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

将iFrame Resizer与React JS页面作为内容一起使用

2 个答案: