vue页面嵌套iframe页面传值、调用、首次传值获取不到、有缓存数据问题

在父组件中创建iframe

  <!-- iframe -->

    <el-dialog :visible.sync="dialogVisible" width="500px" @close="closeDialog" v-if="dialogVisible">
      <iframe id="iframe" ref="iframe" src="/static/test.html" width="100%" height="260px"></iframe>
    </el-dialog>

通过v-if的创建销毁dom，可以解决iframe页面缓存问题

父传子传值

// 发起会话
    openif(infodata) {
      this.dialogVisible = true;
      var that = this;
      this.$nextTick(() => {<br>        //获取iframe元素
        const iframe = document.getElementById("iframe");
        iframe.onload = function (e) {
          //通过.contentWindow.postMessage(data,"*")向iframe子组件传值
          iframe.contentWindow.postMessage({
            
 
            // 暂时先写死
            'stationId': '69999', // 写死
            'loginId': '17999', // 坐席工号
            // 'dest': infodata.user_mobile, // 手机号+0
            'dest': "13455955635", // 手机号+0
            'username': infodata.ter_user_name ? infodata.ter_user_name : ""// 客户姓名
          }, "*");
        }
      });
    },

1	`iframe.onload用来解决父传子首次传值获取不到数据的问题子组件接收传值`

1 2	`window.addEventListener("message", message => {` `console.log(message ); <br>})`

　　vue父页面调用ifarme子页面方法

// 监听用户关闭对话框,执行签出操作
   closeDialog() {
     const iframe = document.getElementById("iframe");
     iframe.contentWindow.jtapi_Loginout("17999", "69999");
   },