工作线程：addModule() 方法

安全上下文：此功能仅在安全上下文（HTTPS）中，以及在支持的浏览器中提供，可能部分或全部支持。

addModule() 方法是 Worklet 接口的方法，用于加载给定 JavaScript 文件中的模块，并将其添加到当前 Worklet。

语法

js
addModule(moduleURL)
addModule(moduleURL, options)

参数

moduleURL

包含要添加的模块的 JavaScript 文件的 URL 的 String。

options 可选

包含以下任何选项的对象

credentials

一个 Request.credentials 值，指示在加载模块时是否发送凭据（例如 cookie 和 HTTP 身份验证）。可以是 "omit"、"same-origin" 或 "include" 之一。默认为 "same-origin"。另请参见 Request.credentials.

返回值

一个 Promise，在从给定 URL 加载的模块被添加后解析。该 promise 不会返回任何值。

异常

如果 addModule() 失败，它会拒绝该 promise，并向拒绝处理程序传递以下错误之一。

AbortError DOMException

指定的脚本无效或无法加载。

SyntaxError DOMException

指定的 moduleURL 无效。

示例

音频工作线程示例

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

绘制工作线程示例

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

将脚本添加到 绘制工作线程 后，CSS paint() 函数可用于包含工作线程创建的图像

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

规范

规范
HTML 标准
# dom-worklet-addmodule-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。