Signatur
Beschreibung
importScripts() steht in klassischen Web Workern (DedicatedWorkerGlobalScope, SharedWorkerGlobalScope) und in Service Workern zur Verfügung. Die Methode lädt die angegebenen Skripte, führt sie der Reihe nach im globalen Geltungsbereich des Workers aus und kehrt erst zurück, wenn alle Skripte geladen und ausgeführt wurden. Funktionen und Variablen, die diese Skripte global anlegen, stehen danach direkt zur Verfügung.
Die Skripte dürfen parallel heruntergeladen werden, ausgeführt werden sie aber immer in der Reihenfolge, in der die URLs übergeben wurden. Relative URLs werden relativ zur URL des Worker-Skripts aufgelöst, nicht relativ zur HTML-Seite.
Man nutzt importScripts() vor allem, um Hilfsbibliotheken (z. B. Kryptografie- oder Parser-Bibliotheken ohne ES-Modul-Build) in einen Worker zu laden oder Code auf mehrere Dateien aufzuteilen. In Modul-Workern (new Worker(url, { type: "module" })) ist die Methode nicht erlaubt – dort verwendet man stattdessen import-Anweisungen oder dynamisches import().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...urls | string | URL | Beliebig viele URLs der zu importierenden Skripte. Relative Angaben werden relativ zur Worker-Skript-URL aufgelöst. Ohne Argument passiert nichts. |
Rückgabewert
undefined). Die importierten Skripte wirken über ihre globalen Seiteneffekte.Beispiele
Hilfsbibliothek in einen Worker laden
// math-utils.js
function fakultaet(n) {
return n <= 1 ? 1 : n * fakultaet(n - 1);
}
// worker.js
importScripts("math-utils.js");
self.addEventListener("message", (event) => {
const ergebnis = fakultaet(event.data);
self.postMessage(ergebnis);
});
// main.js
const worker = new Worker("worker.js");
worker.addEventListener("message", (e) => console.log("Ergebnis:", e.data));
worker.postMessage(5);Mehrere Skripte in fester Reihenfolge importieren
// worker.js
// config.js definiert CONFIG, logger.js nutzt CONFIG, app.js nutzt beide
importScripts("lib/config.js", "lib/logger.js", "lib/app.js");
// Ab hier sind alle globalen Definitionen verfügbar
console.log(typeof CONFIG, typeof log);Ladefehler abfangen
// worker.js
try {
importScripts("https://cdn.example.com/parser.min.js");
self.postMessage({ status: "bereit" });
} catch (err) {
// NetworkError bei Lade-/CORS-Problemen, SyntaxError bei ungültigem Code
self.postMessage({ status: "fehler", name: err.name, message: err.message });
}Modul-Worker: stattdessen import verwenden
// main.js
const worker = new Worker(new URL("./modul-worker.js", import.meta.url), {
type: "module",
});
// modul-worker.js
// importScripts("x.js") würde hier einen TypeError werfen
import { fakultaet } from "./math-utils.mjs";
self.onmessage = (e) => self.postMessage(fakultaet(e.data));// Wichtig · Fallstricke
- Nur klassische Worker: In Modul-Workern (
type: "module") wirftimportScripts()einenTypeError. Dortimportbzw.import()nutzen. - Synchron und blockierend: Der Worker-Thread bleibt stehen, bis alle Skripte geladen und ausgeführt sind. Der Haupt-Thread ist davon nicht betroffen, trotzdem sollten große Imports nur einmal beim Start erfolgen.
- Fehler: Schlägt das Laden fehl (404, falscher MIME-Typ, CORS), wird ein
NetworkErrorgeworfen; Syntaxfehler im geladenen Skript führen zu einemSyntaxError. Nachfolgende Skripte der Liste werden dann nicht mehr ausgeführt. - Service Worker: Nach der Installation dürfen nur Skripte importiert werden, die bereits während
installgeladen (und damit gecacht) wurden. Spätere Aufrufe mit neuen URLs werfen einenNetworkError. Imports daher am Anfang des Skripts auf oberster Ebene platzieren. - Sicherheit: Importierter Code läuft mit vollen Rechten des Workers. Fremdskripte von CDNs nur aus vertrauenswürdigen Quellen laden; die Content Security Policy (
script-srcbzw.worker-src) gilt auch fürimportScripts(). Nie URLs aus Benutzereingaben übernehmen. - Die Skripte teilen sich einen globalen Geltungsbereich – Namenskollisionen zwischen Bibliotheken sind möglich.