Beispiel:Iframe-child-2.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>Einzubettende Seite</title>
<style>
body {
margin: 0;
padding: 1rem;
font-family: sans-serif;
transition: all 0.5s ease;
background: steelblue; } h1 { color: white;
}
#content {
background: lightblue; transition: height 0.3s; overflow: hidden; padding: 1em;
}
</style>
</head> <body>
Einzubettende Seite
Ich schicke alle 3s eine Message an meine Eltern: <output id="output"></output>
<script>
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function changeHeight() {
const content = document.getElementById('content');
const output = document.getElementById('output');
const newHeight = rand(1, 20); content.style.height = newHeight + 'em'; output.textContent = 'Höhe: ' + newHeight + 'em';
}
// Store the last height sent to the parent let lastHeight = 0;
// Function to get and send the scrollHeight
function sendHeightIfChanged() {
const height = Math.round(document.documentElement.scrollHeight);
if (height !== lastHeight) {
lastHeight = height;
window.parent.postMessage(
{ type: 'resize', height },
"https://wiki.selfhtml.org/"
);
}
}
// Create ResizeObserver to detect growth const observer = new ResizeObserver(sendHeightIfChanged);
window.addEventListener("DOMContentLoaded", () => {
observer.observe(document.documentElement);
observer.observe(document.body);
// Start polling every 300ms to catch shrinkage setInterval(sendHeightIfChanged, 300);
// Initial height message sendHeightIfChanged();
changeHeight(); // Initial call setInterval(changeHeight, 3000); // Repeated changes
});
</script>
</body> </html>
