Workarounds that were widely used to fit an iframe's height to its content
before the frame-sizing property existed.
→ See the modern implementation using frame-sizing
The most common hack. The embedded document watches its own height with
ResizeObserver and, whenever it changes, reports the height
to the parent via parent.postMessage(). The parent applies
the received value to iframe.style.height in a
message event handler. It works cross-origin, but requires
scripts on both sides.
Received height: —
For same-origin documents the parent can read
iframe.contentDocument.body.scrollHeight directly. No
script is needed on the child side, but cross-origin access is blocked
by security restrictions. Here it follows height changes after
load and via polling (setInterval).
Measured height: —
A classic technique for cases that need to keep an aspect ratio rather
than the content height, such as video embeds. Give the wrapper
padding-top: 56.25% (16:9) and position the iframe
absolutely to fill it. Today this is written with
aspect-ratio, but the padding hack was the standard
approach back then.