Worklet.addModule()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
addModule() は Worklet インターフェイスのメソッドで、指定した JavaScript ファイルで定義されるモジュールを現在の Worklet に読み込みます。
構文
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() が失敗した場合、プロミスを拒否し、以下のいずれかのエラーを拒否ハンドラーに送出します。
AbortErrorDOMException-
指定されたスクリプトが無効であるか、または読み込むことができませんでした。
SyntaxErrorDOMException-
指定された
moduleURLが無効です。
例
AudioWorklet の例
const audioCtx = new AudioContext();
const audioWorklet = audioCtx.audioWorklet;
audioWorklet.addModule("modules/bypassFilter.js", {
credentials: "omit",
});
PaintWorklet の例
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
paintWorklet がインクルードされると、 CSS の paint() 関数を使用して、ワークレットが作成した画像を引用することができます。
@supports (background-image: paint(id)) {
h1 {
background-image: paint(hollowHighlights, filled, 3px);
}
}
仕様書
| Specification |
|---|
| HTML # dom-worklet-addmodule-dev |
ブラウザーの互換性
Loading…