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(() => {
        //获取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 : ""// 客户姓名
          }, "*");
        }
      });
    },

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

window.addEventListener("message", message => {
        console.log(message ); 
})

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

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