SVGScriptElement.defer — Eigenschaft · JavaScript-Referenz

Signatur

SVGScriptElement.defer

Beschreibung

Die Eigenschaft defer des Interfaces SVGScriptElement spiegelt das gleichnamige Inhaltsattribut des SVG-Elements <script>. Ist sie true, soll ein externes Skript (angegeben über href) parallel geladen, aber erst ausgeführt werden, wenn das Dokument vollständig geparst ist – analog zu HTMLScriptElement.defer.

Da es sich um ein boolesches Attribut handelt, zählt nur seine Anwesenheit: defer="", defer="defer" und sogar defer="false" bedeuten alle true. Beim Setzen der Eigenschaft auf true fügt der Browser das Attribut hinzu, bei false entfernt er es.

Sinnvoll ist defer vor allem in eigenständigen SVG-Dateien oder in Inline-SVG, wenn ein Skript auf Elemente zugreifen soll, die im Quelltext erst nach dem <script> stehen, und das Rendern der Grafik nicht blockiert werden soll. Für Inline-Skripte (ohne href) hat das Attribut – wie in HTML – keine Wirkung.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Schreiben: `true` setzt das Attribut `defer`, `false` entfernt es. Andere Werte werden in einen booleschen Wert umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut defer am Element vorhanden ist, sonst false. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Unterstützung prüfen und Wert auslesen

// &lt;svg&gt;&lt;script id="app" href="app.js" defer&gt;&lt;/script&gt;&lt;/svg&gt;
const supported = 'defer' in SVGScriptElement.prototype;
console.log('defer unterstützt:', supported);

const script = document.querySelector('svg script#app');
if (supported) {
  console.log(script.defer);
} else {
  // Fallback: Attribut direkt prüfen
  console.log(script.hasAttribute('defer'));
}

defer unterstützt: true true

SVG-Skript dynamisch mit defer erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const script = document.createElementNS(SVG_NS, 'script');
script.setAttribute('href', 'chart-interaktion.js');
script.defer = true; // setzt defer=""

svg.append(script);
console.log(script.getAttribute('defer'));

""

Boolesches Attribut: Falle mit defer="false"

const SVG_NS = 'http://www.w3.org/2000/svg';
const script = document.createElementNS(SVG_NS, 'script');

script.setAttribute('defer', 'false');
console.log(script.defer); // Anwesenheit zählt!

script.defer = false;       // entfernt das Attribut
console.log(script.hasAttribute('defer'));

true false

// Wichtig · Fallstricke

Kompatibilität: Die Eigenschaft ist experimentell und wird nicht von allen Browsern unterstützt. Prüfen Sie die Unterstützung vorher per 'defer' in SVGScriptElement.prototype und greifen Sie sonst auf hasAttribute('defer') bzw. setAttribute() zurück.
Nur bei externen Skripten (href) wirksam; bei Inline-Code wird defer ignoriert.
Dynamisch per createElementNS() eingefügte Skripte verhalten sich unabhängig von defer ohnehin nicht parserblockierend – das Attribut steuert dann die Ausführung kaum noch.
Unbedingt createElementNS('http://www.w3.org/2000/svg', 'script') verwenden – document.createElement('script') erzeugt ein HTMLScriptElement.
SVG-Dateien, die per <img> oder CSS background-image eingebunden sind, führen grundsätzlich keine Skripte aus.
Sicherheit: Skripte in SVG unterliegen der Content Security Policy (script-src); hochgeladene SVG-Dateien von Nutzern können XSS-Vektoren sein und sollten bereinigt werden.

Siehe auch

SVGScriptElement SVGScriptElement.async SVGScriptElement.href SVGScriptElement.type HTMLScriptElement.defer Document.createElementNS() HTMLScriptElement.integrity