Document.currentScript — Eigenschaft · JavaScript-Referenz

Signatur

get Document.currentScript

Beschreibung

Die schreibgeschützte Eigenschaft document.currentScript gibt das HTMLScriptElement (bzw. SVGScriptElement) zurück, dessen Code gerade synchron ausgeführt wird. So kann ein Skript sein eigenes <script>-Tag finden, ohne eine ID zu kennen oder im DOM suchen zu müssen.

Typische Anwendungsfälle sind einbettbare Widgets und Drittanbieter-Skripte: Das Skript liest seine Konfiguration aus data-*-Attributen des eigenen Tags, ermittelt seine eigene URL über src (etwa um relative Ressourcen nachzuladen) oder fügt direkt neben sich Inhalte ins Dokument ein.

Wichtig: Der Wert ist nur während der anfänglichen synchronen Ausführung gesetzt. In Callbacks, Event-Handlern, setTimeout oder nach einem await ist er null – deshalb sollte man die Referenz gleich zu Beginn in einer Variablen sichern. Für ES-Module (type="module") ist der Wert ebenfalls null; dort verwendet man stattdessen import.meta.url.

Rückgabewert

Typ

HTMLScriptElement | SVGScriptElement | null

Beschreibung

Das aktuell ausgeführte <script>-Element oder null, wenn kein klassisches Skript synchron läuft (Callback, Modul, Shadow-DOM).

Beispiele

Konfiguration aus data-Attributen lesen (Widget)

// Einbindung: <script src="widget.js" data-theme="dark" data-user="42"></script>
const script = document.currentScript;
const { theme = 'light', user } = script.dataset;
console.log(`Widget: Theme=${theme}, User=${user}`);

Widget: Theme=dark, User=42

Basis-URL des eigenen Skripts ermitteln

// Relative Ressourcen neben dem Skript nachladen
const scriptUrl = new URL(document.currentScript.src);
const cssUrl = new URL('widget.css', scriptUrl);

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = cssUrl.href;
document.head.append(link);
console.log(cssUrl.href);

https://cdn.example.com/lib/widget.css

Referenz sichern – in Callbacks ist der Wert null

const self = document.currentScript; // jetzt sichern!

setTimeout(() => {
  console.log(document.currentScript); // null
  const box = document.createElement('div');
  box.textContent = 'Geladen';
  self.after(box); // funktioniert dank gesicherter Referenz
}, 0);

null

Modul-Fallback mit import.meta.url

// In <script type="module">
console.log(document.currentScript); // null
const base = new URL('.', import.meta.url);
console.log(base.href);

null https://example.com/js/

// Wichtig · Fallstricke

Nur synchron gültig: In Event-Handlern, Promises, setTimeout oder nach await liefert die Eigenschaft null. Referenz immer sofort beim Start speichern.
Module: Bei type="module" ist der Wert immer null – stattdessen import.meta.url nutzen.
Shadow DOM: Skripte innerhalb eines Shadow-Trees liefern ebenfalls null.
async/defer: Funktioniert auch hier während der Ausführung, allerdings ist die Position im DOM nicht mehr zwingend das Ende des Dokuments – Inhalte daher mit script.after() statt document.write() einfügen.
Kompatibilität: In allen modernen Browsern verfügbar; der Internet Explorer unterstützt die Eigenschaft nicht (dort nur Workarounds über document.scripts).
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert.

Siehe auch

Document.scripts import.meta Element.after() Document.contentType PaymentAddress.recipient