使用 IframeResizer 在 ReactJS 中将 iframe 高度设置为 scrollHeight答案

【问题标题】：Setting iframe height to scrollHeight in ReactJS using IframeResizer使用 IframeResizer 在 ReactJS 中将 iframe 高度设置为 scrollHeight
【发布时间】：2018-05-17 12:52:45
【问题描述】：

该问题的典型解决方案在 React 中不起作用，因为它动态生成的组件结构和事件模型，而不是传统的静态 HTML。我尝试了 react-iframe-resizer-super 但没有找到完美的解决方案。

我的代码：

import React, {PropTypes} from 'react';

import ReactIframeResizer from 'react-iframe-resizer-super';


class Frame extends React.Component {

    constructor() {
    super();
}

componentDidUpdate() {

        const iframeResizerOptions = {
          // log: true,
          // autoResize: true,
          checkOrigin: false,
          // resizeFrom: 'parent',
          // heightCalculationMethod: 'max',
          // initCallback: () => { console.log('ready!'); },
          // resizedCallback: () => { console.log('resized!'); },
      };
    }


    render() {

        return (

            <div style={{position: 'relative'}}>
                <IframeResizer iframeResizerOptions={iframeResizerOptions}>
                    <iframe scrolling="no" src="https://en.wikipedia.org/wiki/Main_Page" allowfullscreen
                            style={{width:'100%', height:'100%'}}
                    }}></iframe>
                 </IframeResizer>
            </div>
        );
    }
}

然后我得到以下错误：

Uncaught ReferenceError: IframeResizer is not defined

React 中有没有办法将 iframe 的高度设置为其可滚动内容的高度，或者有没有其他方法可以归档这个要求？

我参考以下链接：

https://www.npmjs.com/package/react-iframe-resizer-super

【问题讨论】：

标签： node.js reactjs npm

【解决方案1】：

这个问题已经很久了，但我想我会添加以防万一其他人寻求澄清使用 react-iframe-resizer-super + iframe-resizer (JS)

上面代码中的问题是导入组件的拼写错误。

import ReactIframeResizer from 'react-iframe-resizer-super';

应该是：

import IframeResizer from 'react-iframe-resizer-super';

正如您在 Frame 组件中使用的那样。

对于那些希望澄清使用该库的人，这是我的死简单的工作解决方案：

在包含 iFrame yarn add react-iframe-resizer-super iframe-resizer 的 React 项目上安装依赖项
在您用作 iFrame 来源的页面上包含 iframeResizer.contentWindow.min.js。
在 React 中的用法：

DynamicIFrame.jsx

import React from 'react';
import IframeResizer from 'react-iframe-resizer-super';

export const DynamicIFrame = props => {
  const { src } = props;
  const iframeResizerOptions = {
    log: true,
    // autoResize: true,
    checkOrigin: false,
    // resizeFrom: 'parent',
    // heightCalculationMethod: 'max',
    // initCallback: () => { console.log('ready!'); },
    // resizedCallback: () => { console.log('resized!'); },
  };
  return (
    <IframeResizer src={src} iframeResizerOptions={iframeResizerOptions} />
  );
};

【讨论】：