Signatur
Beschreibung
Die Eigenschaft width von HTMLFencedFrameElement spiegelt das HTML-Attribut width des Elements <fencedframe>. Wenn Sie die Eigenschaft lesen, erhalten Sie den aktuellen Attributwert als Zeichenkette. Wenn Sie ihr einen Wert zuweisen, wird das Attribut im DOM entsprechend geändert. Der Wert steht für eine Breite in CSS-Pixeln ohne Einheit, zum Beispiel "300". Ohne Attribut und ohne CSS-Regel ist ein Fenced Frame wie ein <iframe> standardmäßig 300 × 150 Pixel groß.
Fenced Frames gehören zur Privacy Sandbox. Mit ihnen lassen sich Inhalte anderer Anbieter einbetten, typischerweise Werbung aus der Protected Audience API (navigator.runAdAuction()) oder aus sharedStorage.selectURL(). Dabei können einbettende Seite und eingebetteter Inhalt keine Daten miteinander austauschen. Welcher Inhalt geladen wird, bestimmen Sie nicht über ein src-Attribut, sondern über ein FencedFrameConfig-Objekt, das Sie der Eigenschaft config zuweisen.
Weil die Größe eines Rahmens ein Kanal für Datenlecks sein kann, gilt eine Besonderheit: Die innere Größe des Inhalts wird beim Navigieren festgelegt. Ändern Sie width nach der Navigation, wird nur der äußere Rahmen größer oder kleiner. Der eingebettete Inhalt behält seine interne Breite und wird skaliert. Setzen Sie width und height deshalb am besten, bevor Sie config zuweisen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Setzen: die neue Breite als Zeichenkette mit CSS-Pixeln ohne Einheit, z. B. "728". Zahlen werden automatisch in Zeichenketten umgewandelt. |
Rückgabewert
width-Attributs. Gibt es das Attribut nicht, ist das Ergebnis eine leere Zeichenkette "".Beispiele
Fenced Frame erzeugen und Breite setzen
const frame = document.createElement('fencedframe');
frame.width = '728';
frame.height = '90';
document.body.append(frame);
console.log(frame.width);
console.log(frame.getAttribute('width'));Anzeige aus der Protected Audience API passend dimensionieren
const showAd = async (auctionConfig) => {
const frame = document.querySelector('#ad-slot');
// Größe VOR der Navigation festlegen, da sie danach eingefroren wird
frame.width = '300';
frame.height = '250';
const config = await navigator.runAdAuction({
...auctionConfig,
resolveToConfig: true
});
if (config) {
frame.config = config;
} else {
console.log('Keine Anzeige gewonnen');
}
};Funktionserkennung und leerer Standardwert
if ('HTMLFencedFrameElement' in window) {
const frame = document.createElement('fencedframe');
console.log(JSON.stringify(frame.width)); // kein Attribut gesetzt
frame.width = 320; // Zahl wird zur Zeichenkette
console.log(typeof frame.width, frame.width);
} else {
console.log('Fenced Frames werden nicht unterstützt');
}// Wichtig · Fallstricke
- Experimentell: Die Eigenschaft gibt es derzeit nur in Chromium-Browsern ab Version 117. Die Privacy-Sandbox-Funktionen müssen dort aktiviert sein. Firefox und Safari unterstützen
<fencedframe>nicht. Prüfen Sie die Unterstützung immer vorab, zum Beispiel mit'HTMLFencedFrameElement' in window. - Die Größe wird eingefroren: Ändern Sie
widthnach der Navigation, bleibt die innere Breite des Inhalts gleich und der Inhalt wird nur skaliert. Das ist gewollt und schützt die Privatsphäre, führt aber leicht zu unscharfer oder verzerrter Darstellung. - Der Rückgabewert ist immer eine Zeichenkette und keine Zahl. Zum Rechnen brauchen Sie
Number(frame.width). Einheiten wie"300px"oder"50%"sind im Attribut nicht vorgesehen. Für flexible Layouts nutzen Sie besser CSS (style.width). - Bei Anzeigen aus Auktionen sollte die Größe des Rahmens zur ausgelieferten Anzeige passen. Das lässt sich über die Größenangaben in der Auktionskonfiguration und Makros wie
${AD_WIDTH}steuern. - Die eingebettete Seite kann die Größe ihres Rahmens nicht an die einbettende Seite melden, also auch keine automatische Höhen- oder Breitenanpassung auslösen.