HTMLIFrameElement.height — Eigenschaft · JavaScript-Referenz

Signatur

HTMLIFrameElement.height

Beschreibung

Die Eigenschaft height von HTMLIFrameElement spiegelt das HTML-Attribut height eines <iframe>-Elements wider. Der Wert ist immer ein String, zum Beispiel "300". Wenn Sie die Eigenschaft setzen, ändert sich das Attribut sofort, und umgekehrt. Laut HTML-Standard ist der Wert eine ganze Zahl ohne Einheit, die für CSS-Pixel steht.

Fehlt das Attribut, gibt die Eigenschaft einen leeren String "" zurück. Der Rahmen wird dann in seiner Standardhöhe von 150 px angezeigt, sofern kein CSS etwas anderes festlegt. Die Eigenschaft gibt also nicht die tatsächlich dargestellte Höhe zurück. Die gerenderte Höhe erhalten Sie über offsetHeight, clientHeight oder getBoundingClientRect().

Typische Anwendungsfälle:

Die Höhe eines Iframes an seinen Inhalt anpassen, etwa nach einer postMessage-Nachricht vom eingebetteten Dokument.
Iframes dynamisch erzeugen, zum Beispiel für Videos, Karten oder Widgets.
Den im Markup angegebenen Wert auslesen, um vor dem Laden ein festes Seitenverhältnis zu berechnen.

Beachten Sie: CSS-Regeln wie height: 100% oder style.height haben Vorrang vor dem Attribut. Das Attribut ist nur ein Darstellungshinweis und hat die niedrigste Priorität in der Kaskade.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: die neue Höhe als String, z. B. `"400"`. Übergebene Zahlen werden in einen String umgewandelt. Laut HTML-Standard gültig ist nur eine ganze Zahl ohne Einheit.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des height-Attributs als String, oder "", wenn das Attribut nicht gesetzt ist.

Beispiele

Höhe auslesen und ändern

// HTML: <iframe id="karte" src="https://example.com/map" width="600" height="300"></iframe>
const iframe = document.getElementById('karte');

console.log(iframe.height);          // Attributwert als String
console.log(typeof iframe.height);

iframe.height = '450';               // Attribut wird aktualisiert
console.log(iframe.getAttribute('height'));

300 string 450

Iframe dynamisch erzeugen

const erstelleVideoFrame = (src, breite = 640) => {
  const iframe = document.createElement('iframe');
  iframe.src = src;
  iframe.width = String(breite);
  // Seitenverhältnis 16:9 berechnen
  iframe.height = String(Math.round(breite * 9 / 16));
  iframe.title = 'Video';
  iframe.allow = 'fullscreen';
  return iframe;
};

const frame = erstelleVideoFrame('https://example.com/embed/123');
document.body.append(frame);
console.log(frame.width, frame.height);

640 360

Höhe per postMessage an den Inhalt anpassen

// Im eingebetteten Dokument (child.html):
// parent.postMessage({ typ: 'hoehe', wert: document.documentElement.scrollHeight }, 'https://meine-seite.de');

const iframe = document.querySelector('#widget');

window.addEventListener('message', (event) => {
  // Herkunft immer prüfen!
  if (event.origin !== 'https://widget.example.com') return;
  const { typ, wert } = event.data ?? {};
  if (typ === 'hoehe' && Number.isFinite(wert)) {
    iframe.height = String(Math.ceil(wert));
    console.log(`Neue Höhe: ${iframe.height}px`);
  }
});

Neue Höhe: 812px

Attributwert und gerenderte Höhe im Vergleich

// HTML: <iframe id="f" src="about:blank" height="200" style="height: 500px"></iframe>
const f = document.getElementById('f');

console.log(f.height);        // Attribut
console.log(f.offsetHeight);  // tatsächlich gerendert (CSS hat Vorrang, inkl. Rahmen)

const ohneAttr = document.createElement('iframe');
console.log(JSON.stringify(ohneAttr.height));

200 504 ""

// Wichtig · Fallstricke

Immer ein String: Für Berechnungen müssen Sie den Wert umwandeln, z. B. mit Number(iframe.height) oder parseInt(iframe.height, 10). Ohne Umwandlung ergibt iframe.height + 10 eine String-Verkettung wie "30010".
CSS hat Vorrang: Legen Stylesheets oder style.height eine Höhe fest, bleibt eine Änderung von height ohne sichtbare Wirkung.
Einheiten: Werte wie "50%" werden zwar gespeichert und von manchen Browsern aus Kompatibilitätsgründen auch ausgewertet, sind laut HTML-Standard aber ungültig. Für relative Größen verwenden Sie besser CSS, zum Beispiel aspect-ratio.
Kein Zugriff auf die Inhaltshöhe: Bei Dokumenten von einem anderen Ursprung verhindert die Same-Origin-Policy, dass Sie die Höhe des Inhalts auslesen (contentDocument ist dann null). Das eingebettete Dokument muss seine Höhe selbst per postMessage mitteilen. Prüfen Sie beim Empfang dabei immer event.origin.
Layout-Verschiebungen: Wenn Sie width und height schon im Markup angeben, reserviert der Browser vorab Platz. Das verringert den Cumulative Layout Shift (CLS).
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

HTMLIFrameElement HTMLIFrameElement.width HTMLIFrameElement.contentWindow HTMLElement.offsetHeight Element.getBoundingClientRect() Window.postMessage() HTMLFencedFrameElement.height