LayoutShiftAttribution: Methode toJSON()
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die Methode toJSON() der Schnittstelle LayoutShiftAttribution gibt ein JSON-serialisierbares einfaches Objekt zurück, das das LayoutShiftAttribution-Objekt repräsentiert.
Die Methode wird automatisch von JSON.stringify() aufgerufen, wenn bei der JSON-Serialisierung ein LayoutShiftAttribution-Objekt vorkommt.
Syntax
toJSON()
Parameter
Keine.
Rückgabewert
Ein JSON-serialisierbares einfaches Objekt mit den folgenden Eigenschaften:
Der Wert jeder Eigenschaft wird unverändert kopiert. Wenn das zurückgegebene Objekt an JSON.stringify() übergeben wird, werden die Eigenschaften previousRect und currentRect zusätzlich mithilfe von DOMRectReadOnly.toJSON() serialisiert.
Das zurückgegebene Objekt enthält die Eigenschaft node nicht, da Node keine toJSON()-Operation bereitstellt.
Beispiele
toJSON() direkt aufrufen
Dieses Beispiel erhält ein LayoutShiftAttribution-Objekt. Ein direkter Aufruf von toJSON() gibt ein einfaches Objekt zurück. Dessen Eigenschaften haben dieselben Werte wie die entsprechenden Eigenschaften des ursprünglichen Objekts.
new PerformanceObserver((list) => {
for (const { sources } of list.getEntries()) {
if (sources) {
const attribution = sources[0];
const json = attribution.toJSON();
console.log(json); // A plain object
console.log(typeof json); // "object"
console.log(json.previousRect.x); // Same value as attribution.previousRect.x
}
}
}).observe({ type: "layout-shift", buffered: true });
In einen JSON-String serialisieren
Innerhalb der Callback-Funktion aus dem vorherigen Beispiel kann dasselbe Objekt mit JSON.stringify() serialisiert werden. Dabei wird die Methode toJSON() automatisch aufgerufen.
console.log(JSON.stringify(attribution));
Dies würde einen JSON-String wie den folgenden ausgeben (zur besseren Lesbarkeit formatiert):
{
"previousRect": {
"x": 917.25,
"y": 708.25,
"width": 706.5,
"height": 248.5,
"top": 708.25,
"right": 1623.75,
"bottom": 956.75,
"left": 917.25
},
"currentRect": {
"x": 693.25,
"y": 708.25,
"width": 1154.5,
"height": 472.5,
"top": 708.25,
"right": 1847.75,
"bottom": 1180.75,
"left": 693.25
}
}
Spezifikationen
| Spezifikation |
|---|
| Layout Instability API # sec-layout-shift-attribution |