Automatically adjust height of iframe using React Hooks

Question

I have been working on adjusting iframe height automatically.

The solutions with the problem are not working in React Hooks.

I have read Setting iframe height to scrollHeight in ReactJS and Adjust width and height of iframe to fit with content in it. I have explored additional posts and tried several times for almost a week. However, I have not found a proper way to figure this out.

I simplified what I have tried. My code

Apart from my code, I also tried iframeResizer.min.js, yet it is not working. I believe it is because react generates dynamically. I found iframe-resizer-react and tried but I have not found a way to solve it.

Can anybody have the same situation? How can I adjust iframe height automatically in React Hooks?

Provincetown

Answer 1

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.

Trawler

I really appreciate your help but it seems not working for me. I don't have any issue but the problem is iframe isn't showing the whole page. Can you make a chat to see my current page? – Provincetown

I have no errors in the console log. Based on the example, it it true that I am using the iframe in FrameWrapper Function to display another page in local using src={http://localhost:3000/employees/1} – Provincetown

this doesn't work with cross-origin, when you try to access document from a different origin it will raise cors errors. – Jaques

Answer 2

The solution Moe presents does not work for me, but adding a few lines make it work. The iframe has a height of 0px and does not change. You could change the state initial value to see something if you don't see the iframe because it has a height of 0px. I use useEffect hook to run the onLoad function when my FrameWrapper component mounts and it updates the height state of the component successfully.

export const FrameWrapper = ({ html }) => {
  const ref = useRef();
  const [height, setHeight] = useState('0px');

  const onLoad = () => {
    setHeight(ref.current.contentWindow.document.body.scrollHeight + 'px');
  };
  useEffect(() => {
    onLoad();
  }, []);

  return (
    <iframe
      ref={ref}
      onLoad={onLoad}
      className='w-full'
      id='iframe'
      srcDoc={html}
      height={height}
      scrolling='no'
      frameBorder='0'
    ></iframe>
  );
};

Intemperate

just thought i'd mention for anybody reading this that if you're using typescript 2 changes will need to be made. 1) useRef<HTMLIframeElement> 2) ref.current?.contentWindow?.document.body.scrollHeight – Wormy