JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<iframe id="container" src="">
</iframe>
</div>
JavaScript
const iframeElement = document.getElementById("container");
// Periodically increment the height of the content
let currentHeight = 0;
window.setInterval(() => {
if (currentHeight < 2000) {
currentHeight += 100;
iframeElement.contentWindow.document.body.style.height = `${currentHeight}px`;
}
}, 1000);
// React to content height changes and adapt the size of the iframe
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log(entry);
iframeElement.style.height = `${entry.target.scrollHeight}px`;
});
});
resizeObserver.observe(iframeElement.contentWindow.document.body);