山东大学软件学院创新项目实训-基于LLM的药物分子性质分析平台（五）

我和另一个队友进一步构想实现在一个vue项目中嵌入一个chatbot的集成框架。

下面是学习过后总结的步骤：

1，打开需要被嵌入的项目的根文件夹，运行npm run build命令构建该子项目，生成dist文件夹。

2，返回主项目的根文件夹，在src/components或者任意合适的位置创建一个组件，比如名为"EmbeddedProject.vue"。

3.在这个组件内部添加一个iframe标签，设置src属性指向子项目的index.html文件路径。

代码如下：

但是只了解这些，不足以支持系统开发，所以我和队友又去学习了一下iframe属性和父子项目的交互。

①在iframe内部页面监听message事件

 window.addEventListener("message", (event) => {
      if (event.origin === "http://您外层页面的地址:5173") {
        if (event.data === "testLog1") {
          this.testLog1();
        } else if (event.data === "testLog2") {
          this.testLog2();
        }
      }
    });

②在外层页面中发送消息调用iframe内部事件

 iframeTestLog1Fn() {
      this.$refs.h5Ref.contentWindow.postMessage("testLog1", "http://内层页面ip:8089");
    },
 
    iframeTestLog2Fn() {
      this.$refs.h5Ref.contentWindow.postMessage("testLog2", "http://内层页面ip:8089");
    },