Beispiel:Iframe-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Demo mit aktivem Inhalt</title>
<style>
iframe {
width: 100%;
border: 2px solid gold;
transition: height 0.3s ease;
}
</style>
</head> <body>
Demo mit aktivem Inhalt
<iframe id="myFrame" src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Iframe-child-1.html"></iframe>
<script> document.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('myFrame');
iframe.addEventListener('load', () => {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const iframeBody = iframeDocument.body;
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
const height = entry.contentRect.height;
iframe.style.height = (height + 36) + 'px';
}
});
observer.observe(iframeBody); });
}); </script> </body> </html>
