Worklet: addModule()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die addModule()-Methode der Worklet-Schnittstelle lädt das Modul aus der angegebenen JavaScript-Datei und fügt es dem aktuellen Worklet hinzu.

Syntax

js
addModule(moduleURL)
addModule(moduleURL, options)

Parameter

moduleURL

Ein String, das die URL einer JavaScript-Datei mit dem hinzuzufügenden Modul enthält.

options Optional

Ein Objekt mit beliebigen der folgenden Optionen:

credentials

Ein Request.credentials-Wert, der angibt, ob Anmeldeinformationen (z.B. Cookies und HTTP-Authentifizierung) beim Laden des Moduls gesendet werden sollen. Kann einer von "omit", "same-origin" oder "include" sein. Der Standardwert ist "same-origin". Siehe auch Request.credentials.

Rückgabewert

Ein Promise, der aufgelöst wird, sobald das Modul von der angegebenen URL hinzugefügt wurde. Das Versprechen liefert keinen Wert zurück.

Ausnahmen

Wenn addModule() fehlschlägt, lehnt es das Versprechen ab und liefert einen der folgenden Fehler an den Ablehnungs-Handler.

AbortError DOMException

Das angegebene Skript ist ungültig oder konnte nicht geladen werden.

SyntaxError DOMException

Die angegebene moduleURL ist ungültig.

Beispiele

AudioWorklet-Beispiel

js
const audioCtx = new AudioContext();
const audioWorklet = audioCtx.audioWorklet;
audioWorklet.addModule("modules/bypassFilter.js", {
  credentials: "omit",
});

PaintWorklet-Beispiel

js
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);

Sobald das Skript zum PaintWorklet hinzugefügt wurde, kann die CSS paint()-Funktion verwendet werden, um das vom Worklet erstellte Bild einzubinden:

css
@supports (background-image: paint(id)) {
  h1 {
    background-image: paint(hollowHighlights, filled, 3px);
  }
}

Spezifikationen

Specification
HTML
# dom-worklet-addmodule-dev

Browser-Kompatibilität