HTMLScriptElement.text — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.text

Beschreibung

Die Eigenschaft text von HTMLScriptElement gibt den Inline-Inhalt eines <script>-Elements als String zurück. Beim Lesen werden die Inhalte aller direkten Kind-Textknoten in Dokumentreihenfolge aneinandergehängt. Beim Schreiben werden alle Kindknoten entfernt und durch einen einzigen Textknoten mit dem neuen Wert ersetzt. Das Verhalten entspricht damit weitgehend textContent.

Typische Einsatzfälle sind:

dynamisch erzeugte Inline-Skripte, etwa für Analyse-Snippets oder JSONP-Altlasten,
das Auslesen eingebetteter Daten aus <script type="application/json"> oder type="application/ld+json">,
Vorlagen in <script type="text/template">.

Wichtig: Ob ein Skript ausgeführt wird, entscheidet sich beim Vorbereiten des Elements. Das passiert, sobald es ins Dokument eingefügt wird. Ein Skript, das schon gelaufen ist, führt geänderten text nicht noch einmal aus. Wenn Sie Code erneut ausführen möchten, erzeugen Sie ein neues <script>-Element. Hat das Element ein src-Attribut, wird text beim Ausführen ignoriert.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| TrustedScript		Nur beim Schreiben: der neue Inline-Quelltext. Bei aktiven Trusted Types ist ein `TrustedScript`-Objekt nötig.

Rückgabewert

Typ

string

Beschreibung

Der verkettete Text aller direkten Kind-Textknoten des Elements. Enthält das Element keinen Text, ist das Ergebnis ein leerer String "".

Beispiele

Inline-Skript dynamisch erzeugen und ausführen

const script = document.createElement('script');
script.text = `
  window.appConfig = { theme: 'dark', version: '2.4.1' };
  console.log('Konfiguration geladen');
`;
// Ausgeführt wird das Skript erst beim Einfügen ins Dokument
document.head.append(script);

console.log(window.appConfig.theme);

Konfiguration geladen dark

Eingebettete JSON-Daten auslesen

// HTML: <script id="initial-state" type="application/json">{"user":"Anna","items":3}</script>
const dataEl = document.getElementById('initial-state');
const state = JSON.parse(dataEl.text);

console.log(state.user, state.items);

Anna 3

Geänderter Text wird nicht erneut ausgeführt

const s = document.createElement('script');
s.text = "console.log('Lauf 1');";
document.body.append(s); // gibt 'Lauf 1' aus

s.text = "console.log('Lauf 2');"; // wird NICHT ausgeführt
console.log(s.text);

// Zum erneuten Ausführen ein neues Element erzeugen
const s2 = document.createElement('script');
s2.text = s.text;
document.body.append(s2);

Lauf 1 console.log('Lauf 2'); Lauf 2

Zuweisung mit Trusted Types

// Unter CSP: require-trusted-types-for 'script'
const policy = trustedTypes.createPolicy('app-scripts', {
  createScript: (code) => code // hier prüfen oder bereinigen!
});

const script = document.createElement('script');
script.text = policy.createScript("console.log('geprüfter Code');");
document.head.append(script);

geprüfter Code

// Wichtig · Fallstricke

Sicherheit: Wenn Sie text setzen und das Element danach einfügen, führt der Browser beliebigen Code aus. Das ist so gefährlich wie eval(). Setzen Sie niemals ungeprüfte Nutzereingaben oder Daten aus fremden Quellen ein, sonst droht XSS. Eine Content Security Policy ohne 'unsafe-inline' blockiert solche Skripte, außer sie tragen eine gültige nonce (Eigenschaft script.nonce). Mit require-trusted-types-for 'script' löst die Zuweisung eines normalen Strings einen TypeError aus. Dann ist ein TrustedScript nötig.

Ein Skript läuft nur einmal. Spätere Änderungen an text haben keine Wirkung auf die Ausführung. Ausnahme: Ein Element, das ohne Inhalt und ohne src eingefügt wurde, gilt noch nicht als gestartet. Es läuft, sobald Text hinzukommt.
Skripte, die über innerHTML eingefügt werden, laufen nicht. Skripte, die mit createElement und text erzeugt werden, laufen dagegen schon.
Beim Lesen zählen nur direkte Textknoten. Bei gewöhnlichen Skripten macht das keinen Unterschied zu textContent.
Die Eigenschaft wird in allen Browsern unterstützt. Trusted Types sind vor allem in Chromium-basierten Browsern verfügbar.

Siehe auch

eval() HTMLObjectElement.type HTMLScriptElement.type HTMLScriptElement.defer HTMLScriptElement.src