Setting Iframe Height to Scrollheight in Reactjs

Setting iframe height to scrollHeight in ReactJS

What you want to do is in your componentDidMount, run the script to set the height. [If you are loading external content, you might want to add event listener on the IFrame to wait until the external content is loaded.]

   componentDidMount() {
       const obj = ReactDOM.findDOMNode(this);
       obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }

There is another, more "reacty" way of doing this - where you would store the height in state.

   componentDidMount() {
       const obj = ReactDOM.findDOMNode(this);
       this.setState({iFrameHeight:  obj.contentWindow.document.body.scrollHeight + 'px'});
    }

and then in your render:

render() {
    return (
        <div style={{maxWidth:640, width:'100%', height:this.state.iFrameHeight, overflow:'auto'}}>
            {this.renderHTMLFrame()}
        </div>
    );
}

Automatically adjust height of iframe using React Hooks

from Setting iframe height to scrollHeight in ReactJS :

Use the onLoad() handler from the iframe to ensure that the content has loaded before you try to resize it - if you try to use React's lifecycle methods like componentDidMount() you run the risk of the content not being present yet.

function FrameWrapper() {
  const ref = React.useRef();
  const [height, setHeight] = React.useState("0px");
  const onLoad = () => {
    setHeight(ref.current.contentWindow.document.body.scrollHeight + "px");
  };
  return (
    <iframe
      ref={ref}
      onLoad={onLoad}
      id="myFrame"
      src="http://demo_iframe.htm"
      width="100%"
      height={height}
      scrolling="no"
      frameBorder="0"
      style={{
        maxWidth: 640,
        width: "100%",
        overflow: "auto",
      }}
    ></iframe>
  );
}

PS: You will run into issues with cross-origin policy if the iframe is in a different domain.

How do I set my iframe height to maximum instead of scroll?

Add this function to your JavaScript and your iframe will adjust to the height of its content.

function resizeFrame(object) {
    object.style.height = object.contentWindow.document.documentElement.scrollHeight + 'px';
  }

and call the function onload in the markup, like so:

<iframe onload="resizeFrame(this)">{$content}</iframe>

Fiddle: https://jsfiddle.net/698pfz1w/

How do I set my iframe height to its content?

Your script can only access iframe content DOM on the same domain origin. Cross-origin access is forbidden due to security concern. At least directly, as you still have one good way to do that: the standard postMessage API. Provided that you also have control of the target domain, otherwise you're out of luck, sorry.

To do cross-origin communication, you set up a script in your target document to query the document height, then use postMessage to transmit that information to the iframe host, which listens on the message event. The host then sets the height of the iframe accordingly. It's not very hard to do, it has excellent browser support, and it's very fast (communication is done within your computer, not going out to the network).

Make iframe automatically adjust height according to the contents without using scrollbar?

Add this to your <head> section:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

As found on sitepoint discussion.

Setting Iframe Height to Scrollheight in Reactjs