HTMLFencedFrameElement.height — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFencedFrameElement.height

Beschreibung

Die Eigenschaft height von HTMLFencedFrameElement spiegelt das HTML-Attribut height des Elements <fencedframe> wider. Beim Lesen erhältst du den aktuellen Attributwert als Zeichenkette, beim Schreiben wird das Attribut gesetzt. Der Wert wird als Höhe in CSS-Pixeln interpretiert (z. B. "250"), ohne Einheit.

Ein <fencedframe> gehört zur Privacy Sandbox und bettet Inhalte ein, meist Werbung aus der Protected Audience API oder dem Shared Storage, ohne dass eingebettete und einbettende Seite Informationen austauschen können. Anders als beim <iframe> kann die Größe nicht beliebig verändert werden, sobald Inhalte geladen sind: Die Größe des inneren Frames wird beim Navigieren festgelegt und bleibt danach fest, damit die Größe nicht als Kanal zur Datenübertragung dient.

Nützlich ist height vor allem, wenn man ein <fencedframe> per JavaScript erzeugt und dessen Abmessungen vor dem Zuweisen der config festlegen möchte. Für die Darstellung kann alternativ CSS verwendet werden. Werbeplattformen erlauben oft nur bestimmte Formatgrößen (z. B. 300×250).

Parameter

Name	Typ	Default	Beschreibung
$value	string	"" (kein Attribut gesetzt)	Beim Setzen: neue Höhe als Zeichenkette in CSS-Pixeln, z. B. `"250"`. Zahlen werden automatisch in Zeichenketten umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des height-Attributs als Zeichenkette; leere Zeichenkette, wenn das Attribut fehlt.

Beispiele

Höhe eines vorhandenen fencedframe auslesen

// HTML: <fencedframe id="ad" width="300" height="250"></fencedframe>
const frame = document.querySelector('#ad');
console.log(frame.height);
console.log(typeof frame.height);

250 string

fencedframe dynamisch erzeugen und Größe festlegen

const frame = document.createElement('fencedframe');
frame.width = '300';
frame.height = '250';
document.body.append(frame);

console.log(frame.getAttribute('height'));

250

Mit Protected Audience ein Werbemittel laden

const showAd = async (auctionConfig) => {
  if (!('HTMLFencedFrameElement' in window)) {
    console.log('Fenced Frames werden nicht unterstützt');
    return;
  }
  const frame = document.createElement('fencedframe');
  // Größe VOR dem Laden setzen – danach ist die innere Größe fixiert
  frame.width = 728;
  frame.height = 90;
  const config = await navigator.runAdAuction({
    ...auctionConfig,
    resolveToConfig: true
  });
  if (config) {
    frame.config = config;
    document.querySelector('#ad-slot').append(frame);
  }
  console.log(frame.height);
};

90

// Wichtig · Fallstricke

Experimentell: <fencedframe> wird derzeit nur in Chromium-Browsern (ab Version 117) unterstützt. Prüfe per 'HTMLFencedFrameElement' in window, ob die Schnittstelle vorhanden ist.
Der Wert ist immer eine Zeichenkette. Zum Rechnen musst du ihn mit Number() oder parseInt() umwandeln.
Wird height geändert, nachdem Inhalte geladen wurden, ändert sich nur die äußere Größe des Elements. Die innere Größe des eingebetteten Dokuments bleibt fest, der Inhalt wird skaliert oder mit Rändern dargestellt. Lege die Größe daher vor dem Setzen von config fest.
Eine FencedFrameConfig kann eine feste Inhaltsgröße vorgeben (containerWidth/containerHeight). Bei Abweichungen gilt diese Größe, nicht das Attribut.
Prozentangaben wie "50%" sind nicht sinnvoll. Für responsive Layouts ist CSS besser geeignet.

Siehe auch

HTMLFencedFrameElement.allow HTMLFencedFrameElement.config HTMLFencedFrameElement.width HTMLIFrameElement.height HTMLEmbedElement.height