Setting iframe height to scrollHeight in GatsbyJS

Question

https://i.stack.imgur.com/G3Fbt.jpg

The mobile height is not big enough. Also, in the desktop mode, i still don't understand why my iframe has scroll bar even if there are no constraints on the containing div??? Why isn't it stretching the page with its full contents?

my error is:

TypeError: Cannot read property 'iFrameHeight' of null

I also tried the non-react way listed here:

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

But it doesn't work

Here's some of my code:

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>
    );
  }
}

my 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

The error you're getting is due to not initializing state. You need to add something like this to your component:

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

As for the second question about your iframe sizing: iframes do not grow/shrink dynamically according to their content. There are approaches to coordinate with an embedded iframe using the postMessage API to communicate, but the embedded site would need to measure the width of its content and provide that up to the parent/embedding site for application.