I am writing the content of a textarea to an iFrame and so I need to set the height of the element on the parent page to display it properly:

  const $iFrames = $('iframe');

  function iframeLoaded(iFrameID) {
    const iFrame = document.getElementById(iFrameID);
    if (iFrame) {
      const height = `${iFrame.contentWindow.document.body.scrollHeight}px`;
      iFrame.height = '';
      iFrame.height = height;
      console.log('height:', height);
    }
  }

  $iFrames.each((i, frame) => {
    const $frame = $(frame);
    const ta = $frame
      .next('textarea');

    const doc = $(frame)[0].contentWindow.document;
    doc.open();
    doc.write(ta.val());
    doc.close();
    iframeLoaded($frame.attr('id'));
  });

However, in this example the height const is always 0, but the content is loaded correctly. Where am I going wrong?