Worklet.addModule()

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

addModule()Worklet インターフェイスのメソッドで、指定した JavaScript ファイルで定義されるモジュールを現在の Worklet に読み込みます。

構文

js
addModule(moduleURL);
addModule(moduleURL, options);

引数

moduleURL

文字列で、追加するモジュールの JavaScript ファイルの URL を指定します。

options 省略可

次のオプションを指定するためのオブジェクトです。

credentials

モジュールをロードする際に、資格情報(例: Cookie や HTTP 認証)を送信するかどうかを指定する Request.credentials 値です。 "omit", "same-origin", "include" のいずれかを指定することができます。既定値は "same-origin" です。 Request.credentials も参照してください。

返値

指定された URL のモジュールが追加されると解決される Promise です。このプロミスは値を返しません。

例外

addModule() が失敗した場合、プロミスを拒否し、以下のいずれかのエラーを拒否ハンドラーに送出します。

AbortError DOMException

指定されたスクリプトが無効であるか、または読み込むことができませんでした。

SyntaxError DOMException

指定された moduleURL が無効です。

AudioWorklet の例

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

PaintWorklet の例

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

paintWorklet がインクルードされると、 CSS の paint() 関数を使用して、ワークレットが作成した画像を引用することができます。

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

仕様書

Specification
HTML
# dom-worklet-addmodule-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
addModule

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support