Laya中嵌入iframe并通信,接收发送数据

Laya项目中要做一套类似表格的页面,负责收集数据,如果用laya的写法,个人感觉很麻烦,于是想采用laya中嵌套iframe的方法,然后将laya中的默认数据传到iframe中,作为默认数据填充,然后当iframe中数据更改后,点击提交按钮,再把iframe收集到的数据回传到laya,就此完成两者的通信.

如上图

//Laya(ts)界面部分代码
init(){
    //将 html文件夹和资源放到bin目录的res下,然后src引用
    let iframe.src = "res/report/index.html";
    //设置 iframe 的id,后面便于通过getElementById引用
    iframe.id = "report";
    //一些iframe的样式自己设置一下,然后添加到Laya.Browser.document.body中
    Laya.Browser.document.body.appendChild(iframe);
    // 确保 iframe 加载完成,不然监听会有问题,也可以设置延时函数
    iframe.onload = (e) => {
    Laya.Browser.document.getElementById("report").contentWindow.document.addEventListener("ToOuter", (e) => {
    //addEventListener 是对dom的监听,如果监听contentWindow.是一个window,所以监听不到
        console.log("Laya 接收数据:", e.detail);
      });
      this.sendMessage("formData", fomrData);
    };
}

public sendMessage(msgName, msgData) {
    //向名称为report的iframe中发送数据的方法,在上面调用
    const iframeWindow = Laya.Browser.document.getElementById("report").contentWindow;
    //这里通信的方法,是在html中定义一个接受消息的方法,然后通过window.xx方法去调用
    iframeWindow.getMsg(msgName, msgData);
}

//html的部分代码
mounted() {
    //此处是加载了在html中引入了vue.js,所以需要将getMsg方法挂载到window上,如果不挂载,那么Laya中就无法通过window对象使用html中的方法
   window.getMsg = this.getMsg;
},
methods: {
   onSubmitForm() {
        //iframe中的提交操作,
       var event = new CustomEvent("ToOuter", { detail: this.form });
       document.dispatchEvent(event);
    },
    //iframe中默认获取Laya传过来的数据方法
   getMsg(name, data) {
       console.log("html 接收数据:" + name, data);
   },
},

 如图就可以正常通信了