Webix中iframe嵌入drawio时postMessage通信异常问题求助

数据老陈

2026-6-25

Drawio嵌入Webix页面的postMessage通信问题排查

问题背景

需在Webix页面中展示后端提供的Drawio XML内容，按照官方嵌入指南使用iframe实现，但postMessage通信出现异常，表现为加载状态异常（ spinner持续转动或页面空白无法操作），且无法触发save/autosave事件。

具体通信异常点

使用webix.$$().getIframe().postMessage或webix.$$().getWindow().postMessage发送消息时，消息可到达Drawio监听代码（app.min第12369行），但因校验L.source == (window.opener || window.parent)不通过失效——L.source为当前window，window.opener为null，window.parent为主窗口
使用webix.$$().getIframe().contentWindow.postMessage发送消息时，消息无法到达iframe内的Drawio代码

相关代码片段

Webix iframe配置

{
    view: "iframe",
    id: "iframe#1",
    src: 'https://embed.diagrams.net/?embed=1', //&ui=atlas&spin=1&&libraries=1&modified=unsavedChanges&proto=json&chrome=0',
    style: 'border:0;position:"fixed";top:0;left:0;right:0;bottom:0;width:100%;height:100%;cursor:default;'
}

消息监听与发送代码

const receive = (evt: MessageEvent<any>) => {
  const frame = (webix.$$(this.getSubViewID("iframe")) as webix.ui.iframe).getIframe() as any;
  if (evt && frame.contentWindow && evt.source === frame.contentWindow) {
    const msg = JSON.parse(evt.data);
    if (msg.event === 'init') {
      frame.contentWindow.postMessage(JSON.stringify({
        action: 'load',
        xml: this.xmlData,
        autosave: 1
      }));
    }
    if (msg.event === 'save' || msg.event === 'autosave') {
      this.xmlData = msg.xml;
    }
    if (msg.event === 'exit') {
      window.removeEventListener('message', receive);
      frame.contentWindow.close();
    }
  }
};
window.addEventListener("message", receive);