Signatur
Beschreibung
Die Methode requestResize() gehört zum Konzept der responsiven iframes. Ein Dokument in einem <iframe> kann seine natürliche Inhaltsgröße an das einbettende Dokument weitergeben. Das Elternfenster kann das <iframe> dann per CSS (frame-sizing: content-height bzw. content-width) automatisch an den Inhalt anpassen. Bisher brauchte man dafür postMessage()-Konstruktionen mit Höhenmessung.
Dafür müssen beide Seiten zustimmen: Das eingebettete Dokument muss sich über <meta name="responsive-embedded-sizing"> anmelden, und das Elternfenster muss die automatische Größenanpassung am iframe-Element per CSS einschalten. Die Größe wird zunächst einmal beim Laden übermittelt. Ändert sich der Inhalt später, etwa durch nachgeladene Daten, auf- und zuklappende Bereiche oder Layoutwechsel, ruft das eingebettete Dokument window.requestResize() auf. Damit wird die neue Größe erneut an das Elternfenster gemeldet.
Die Methode nimmt keine Argumente entgegen und gibt nichts zurück. Die Anpassung selbst übernimmt der Browser beim nächsten Layout-Durchlauf. Hat sich das Dokument nicht angemeldet, bewirkt der Aufruf nichts.
Rückgabewert
Beispiele
Anmeldung im eingebetteten Dokument und Elternseite einrichten
<!-- widget.html (eingebettetes Dokument) -->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- Zustimmung zur responsiven Größenanpassung -->
<meta name="responsive-embedded-sizing">
</head>
<body>
<p>Inhalt des Widgets …</p>
</body>
</html>
<!-- index.html (Elternfenster) -->
<style>
iframe.auto {
frame-sizing: content-height; /* Höhe folgt dem Inhalt */
width: 100%;
border: 0;
}
</style>
<iframe class="auto" src="widget.html"></iframe>Größe nach dem Nachladen von Inhalten neu melden
// Im eingebetteten Dokument
const liste = document.querySelector('#kommentare');
const ladeKommentare = async () => {
const res = await fetch('/api/kommentare');
const daten = await res.json();
for (const k of daten) {
const li = document.createElement('li');
li.textContent = k.text; // textContent statt innerHTML (XSS-sicher)
liste.append(li);
}
// Neue Inhaltshöhe an das Elternfenster melden
if (typeof window.requestResize === 'function') {
window.requestResize();
}
};
ladeKommentare();Automatisch bei Größenänderung mit ResizeObserver, inkl. Fallback
// Im eingebetteten Dokument
const meldeGroesse = () => {
if (typeof window.requestResize === 'function') {
window.requestResize();
} else {
// Fallback für Browser ohne Unterstützung: klassisch per postMessage
window.parent.postMessage(
{ typ: 'hoehe', wert: document.documentElement.scrollHeight },
'https://eltern.example.com' // Zielursprung immer angeben!
);
}
};
const ro = new ResizeObserver(() => meldeGroesse());
ro.observe(document.body);// Wichtig · Fallstricke
- Experimentell: Die Funktion ist Teil eines noch nicht fertigen Vorschlags zu responsiven iframes und wird bisher nur in einzelnen Chromium-Versionen unterstützt. Firefox und Safari bieten sie derzeit nicht an. Prüfe vor dem Aufruf immer mit
typeof window.requestResize === 'function'und plane einen Fallback überpostMessage()ein. - Beide Seiten müssen zustimmen: Fehlt im eingebetteten Dokument
<meta name="responsive-embedded-sizing">oder am iframe das CSSframe-sizing, bewirkt der Aufruf nichts. - Rufe die Methode nicht in schneller Folge auf, zum Beispiel bei jedem Scroll- oder Animationsschritt. Das kann unnötige Layout-Durchläufe im Elternfenster auslösen. Besser ist ein Aufruf nach abgeschlossenen Inhaltsänderungen oder über
ResizeObserver. - Der Aufruf ist nur im eingebetteten Dokument sinnvoll. In einem Fenster der obersten Ebene hat er keine Wirkung.
- Sicherheit: Die Größe eines eingebetteten Dokuments kann Rückschlüsse auf seinen Inhalt zulassen, deshalb ist die Zustimmung beider Seiten nötig. Beim
postMessage-Fallback gib immer einen konkreten Zielursprung an statt"*", und prüfe im Elternfensterevent.origin.