HTMLScriptElement.src — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.src

Beschreibung

Die Eigenschaft src des HTMLScriptElement enthält die URL einer externen Skriptdatei. Sie spiegelt das HTML-Attribut src wider. Beim Lesen bekommst du immer die vollständig aufgelöste, absolute URL zurück, auch wenn im Attribut ein relativer Pfad steht. Den Rohwert liefert getAttribute("src").

Hauptsächlich nutzt man src, um Skripte dynamisch nachzuladen: Du erzeugst mit document.createElement("script") ein Element, setzt src und hängst es ins Dokument ein. Erst beim Einhängen startet der Browser den Download und führt das Skript aus. Dynamisch eingefügte Skripte verhalten sich standardmäßig wie async. Sie blockieren also das Parsen nicht, und ihre Ausführungsreihenfolge ist nicht garantiert, solange du nicht script.async = false setzt.

Hat ein <script> ein src-Attribut, ignoriert der Browser den Inline-Inhalt zwischen den Tags. Fehlt das Attribut, liefert die Eigenschaft einen leeren String "". Ob das Skript geladen wurde oder fehlgeschlagen ist, erfährst du über die Ereignisse load und error.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: absolute oder relative URL der Skriptdatei. Relative URLs werden gegen die Basis-URL des Dokuments (`document.baseURI`) aufgelöst.

Rückgabewert

Typ

string

Beschreibung

Die absolute URL des externen Skripts oder "", wenn kein src-Attribut gesetzt ist.

Beispiele

Skript dynamisch nachladen mit Promise

const loadScript = (url) => new Promise((resolve, reject) => {
  const script = document.createElement("script");
  script.src = url;
  script.addEventListener("load", () => resolve(script));
  script.addEventListener("error", () => reject(new Error(`Laden fehlgeschlagen: ${url}`)));
  document.head.append(script);
});

try {
  await loadScript("https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js");
  console.log("dayjs geladen:", typeof dayjs);
} catch (err) {
  console.error(err.message);
}

dayjs geladen: function

Aufgelöste URL vs. Attributwert

// Angenommen, die Seite liegt unter https://example.com/app/index.html
const script = document.createElement("script");
script.src = "js/main.js";

console.log(script.src);
console.log(script.getAttribute("src"));

https://example.com/app/js/main.js js/main.js

Alle externen Skripte der Seite auflisten

const external = [...document.scripts]
  .filter((s) => s.src !== "")
  .map((s) => new URL(s.src).hostname);

console.log([...new Set(external)]);

["example.com", "cdn.jsdelivr.net"]

Mehrere Skripte in fester Reihenfolge laden

const urls = ["/js/vendor.js", "/js/app.js"];

for (const url of urls) {
  const script = document.createElement("script");
  script.src = url;
  script.async = false; // Reihenfolge der Ausführung beibehalten
  document.body.append(script);
}

// Wichtig · Fallstricke

Nur einmal wirksam: Nachdem ein Skript eingefügt und ausgeführt wurde, lädt eine Änderung von src es nicht erneut. Um ein Skript neu zu laden, musst du ein neues <script>-Element erzeugen.
Sicherheit (XSS): Setze src nie auf URLs aus Benutzereingaben oder Query-Parametern. Fremdcode läuft mit vollen Rechten deiner Seite. Schränke Skriptquellen mit einer Content Security Policy (script-src) ein, und verwende für CDN-Dateien integrity (Subresource Integrity) zusammen mit crossOrigin = "anonymous".
Trusted Types: Ist require-trusted-types-for 'script' aktiv, akzeptiert src nur ein TrustedScriptURL, ein einfacher String löst einen TypeError aus.
Bei Skripten von fremden Domains ohne CORS zeigen Fehlermeldungen in window.onerror nur „Script error.“ an. Abhilfe schafft crossOrigin mit passenden CORS-Headern.
Per innerHTML eingefügte <script>-Elemente werden nicht ausgeführt. Nutze dafür createElement.
ES-Module lädst du mit script.type = "module" oder direkt mit dynamischem import().

Siehe auch

import() HTMLScriptElement.async HTMLScriptElement.text HTMLScriptElement.type HTMLScriptElement.defer