ResizeObserver over iframe

by sperske

HTML

<h1>Outside of iframe</h1>
<iframe id='Content' scrolling="no" height="15"></iframe>

CSS

iframe {
  padding: 0;
  margin: 0;
  border: 1px dashed #aaa;
}
h1 {
  color: red;
}

JavaScript

const content = document.getElementById('Content');
const contentResizeObserver = new ResizeObserver(entries => {
	let tallest = 0;
  for (const entry of entries) {
  	tallest = tallest < entry.contentRect.height ? entry.contentRect.height : tallest;
  }
  content.height = tallest;
});
const contentDoc = content.contentDocument;
contentDoc.body.innerHTML = "<style>body {margin:0;padding:0} h1 {display:inline-block}</style><div id='Content'><h1 contenteditable='true'>Inside of iframe (editable)</h1></div>";
contentResizeObserver.observe(contentDoc.body);