适用场景

适用于报表必须运行在独立页面、宿主样式冲突明显或需要隔离上下文的场景。它不是 BBP 专属方式。

前置条件

准备与宿主页同源、可加载 OwlReport 的 iframe 入口。当前源码会直接访问 contentWindow.document 并写入 contentWindow.$$BEEREPORT_PARAMS，因此仅允许同源页面；跨域入口不能只靠 CSP 或 postMessage 配置解决，必须先把源码改造成纯 postMessage 协议。源码默认使用相对地址 index.html，部署到子路径时可显式传入同源路径，例如 /bee-report/index.html。父页面仍须提供 Vue，因为 mount 会先做 Vue 校验。

最小可运行示例

const container = document.querySelector("#report-host");
if (!container) throw new Error("Missing #report-host");
const instance = await api.mount(
  {
    iframe: true,
    iframeStyle: { minHeight: "640px", background: "#fff" },
    extraStyle: ".report-shell { min-height: 640px; }",
    reportOptions: {
      url: "/bee-report/index.html",
      reportCode: "sales-summary",
      reportVersion: "1.0.0",
      enableWebWorker: true,
    },
  },
  container,
  Vue,
);

const formData = await instance.getFormData();
instance.setFormItemData("region", "east");
instance.$on("reportFormAfterSubmit", (result) => console.log(result));

接入步骤

将 OwlReport iframe 页面部署到宿主页同源地址，再设置 iframe: true；按需用 iframeStyle 设置 iframe 元素，用 extraStyle 注入报表页面样式。
源码按 reportOptions.url || "index.html" 生成 src，并追加报表标识、版本和 Web Worker 开关；url 必须保持同源。
iframe 加载后，父页直接访问 contentWindow.document 注入样式，并把参数写入 contentWindow.$$BEEREPORT_PARAMS；收到 reportMounted 消息后，mount Promise 才 resolve。
getFormItemsInfo、getFormData、getFormItemData、updateScopeData、findCellByField、validate 通过 postMessage 往返，因此返回 Promise。
setter 方法只发送消息，没有同步返回值；需要业务确认时监听对应业务事件，不要依赖立即返回。

成功验证

网络面板中入口 URL 正确，父页面收到 reportMounted，读取方法的 Promise resolve；调用 unmount 后 iframe 收到消息并从 DOM 移除。

常见问题

Promise 一直 pending：先确认 iframe 与宿主页同源且没有认证跳转，再确认页面实现 OwlReport 消息协议。当前实现即使 CSP 放行也不能直接使用跨域入口。
样式不生效：iframeStyle 作用于 iframe 元素，extraStyle 作用于 iframe 内文档，两者用途不同。
当前默认 src 拼接包含 BBP CLZ 参数，这是代码耦合而非通用接入前置；非 BBP 部署应显式配置 url 并在目标环境验证。

iframe 集成