嵌入iframe的QnA机器人向父网页传参展示关联图示的架构方案咨询

核心问题1：匹配解答与关联示意图 #

• 优先在QnA知识库录入阶段为每个FAQ条目新增独立的关联示意图资源名扩展字段，和回答文本分开存储。FAQ场景下条目数量有限，手动绑定的成本极低，且能100%避免匹配错误，远优于事后从回答文本中语义识别的方案。
• 如果现有知识库不支持新增扩展字段，可以在回答文本中加入隐形标记，例如统一用[DIAGRAM:资源文件名]格式附在回答末尾，机器人返回回答时前端过滤掉该标记不展示给用户，单独提取资源文件名即可。

核心问题2：iframe向父页面传递示意图参数 #

采用浏览器原生支持的postMessage方案，跨域场景也可正常使用，是iframe父子通信的标准安全方案，实现逻辑如下：

1. 先确认父站域名和iframe内机器人页面的域名，后续做安全校验用。
2. iframe侧逻辑：机器人拿到回答、提取到示意图资源名后，向父页面发送消息：

// 提取到资源名后执行
const diagramAsset = 'pf800_dip_switch.png' // 从知识库字段/回答标记中提取
const diagramAlt = 'PF800设备DIP开关调整示意图' // 可同步从知识库获取
if (diagramAsset) {
  // 生产环境请把第二个参数的*替换为父站的实际域名，避免消息泄露
  window.parent.postMessage({
    type: 'show_qna_diagram',
    asset: diagramAsset,
    alt: diagramAlt
  }, '*')
}

3. 父站侧逻辑：提前预留左侧80%区域的容器（例如id为diagram-container），监听message事件接收参数并渲染图片：

window.addEventListener('message', (e) => {
  // 安全校验：只接受机器人页面域名的消息，避免恶意注入
  if (e.origin !== 'https://你的机器人部署域名.com') return
  if (e.data.type === 'show_qna_diagram') {
    const container = document.getElementById('diagram-container')
    // 拼接实际的图片资源地址，比如存放在客户站点的静态资源目录或CDN
    const imgFullUrl = `/static/diagrams/${e.data.asset}`
    container.innerHTML = `<img src="${imgFullUrl}" alt="${e.data.alt}" style="max-width: 100%; height: auto; display: block; margin: 20px auto;">`
    // 若无示意图时可清空容器回到默认状态：container.innerHTML = '<p>相关示意图将在此处展示</p>'
  }
})

额外优化建议 #

• 可新增多图支持：如果单条回答对应多张示意图，把asset字段改为数组传递，父页面做轮播或流式排列即可。
• 增加图片加载失败降级：给img标签加onerror事件，加载失败时展示「示意图加载失败」的提示。

内容的提问来源于stack exchange，提问作者StellarFan