Question

移动高度不够大。另外，在桌面模式下，即使对包含div的内容没有任何限制，我仍然不理解为什么我的iframe具有滚动条？？？为什么不将页面的全部内容拉伸？

我的错误是：

TypeError: Cannot read property 'iFrameHeight' of null

我还尝试了此处列出的非反应方式：

https://stackoverflow.com/questions/42042901/setting-iframe-height-to-scrollheight-in-reactjs

但这不起作用

这是我的一些代码：

export default class SecondPage extends Component {
  componentDidMount() {
    const obj = ReactDOM.findDOMNode(this);
    this.setState({ iFrameHeight: obj.contentWindow.document.body.scrollHeight + 'px' });
  }


  render() {
    return (
      <Layout>
        <div className="iframe-container">
          <iframe
            src="https://www.1.com/1.php"
            height={this.state.iFrameHeight}
            style={{ "maxWidth": "100%", "border": "none", "overflow": "auto" }}>
            <p>
              <a href="https://www.1.com/1.php" title="Book Now">Button go</a>
            </p>
          </iframe>
        </div>
      </Layout>
    );
  }
}

我的CSS：

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

Answer 1

您收到的错误是由于未初始化state。您需要在您的组件中添加以下内容：

constructor(props) {
  super(props)
  this.state = { iFrameHeight: 0 }
}

关于iframe尺寸调整的第二个问题：iframe不会根据其内容动态增长/缩小。有一些方法可以使用postMessage API与嵌入式iframe进行通信，但是嵌入式站点需要测量其内容的宽度，并将其提供给父/嵌入站点以进行应用。

在GatsbyJS中将iframe的高度设置为scrollHeight

1 个答案: