iframe 父子窗口之间传值

最新推荐文章于 2023-12-22 11:15:55 发布

～Serendipity～

最新推荐文章于 2023-12-22 11:15:55 发布

阅读量230

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zmj_qq/article/details/129528060

版权

前两天在搞一个需求的时候用到了iframe，研究了一下父子窗口之间的传值问题，只是iframe的方案不合适，但是还是记录一下怎么互相传值。

父窗口

<el-table :data="treeList" style="width:100%" border v-loading="treelistLoading">
  <el-table-column label="标题" prop="mindName" align="center">>
  </el-table-column>
  <el-table-column label="操作" align="center" width="100">
     <template slot-scope="{row}">
         <el-button type="text" @click="openBindNode(row)">查看</el-button>
      </template>
   </el-table-column>
</el-table> 
<el-dialog title="关联科技树支线" :visible.sync="addBindingDialog" width="90%">
      <div style="text-align:right">
        <el-button type="primary" @click="confirmBranchBind">关 联</el-button>
      </div>
      <!-- 回显科技树 -->
      <div class="mindViewBox">
        <!--   下面这个子组件在哪-->
        <div id="mindBindEdit" v-loading="mindLoading" element-loading-background="rgba(0, 0, 0, 0.8)" class="mindView">
          <iframe width="100%" height="100%" :src="`${IFRAMEHOST}branchBindEdit`" frameborder="0" id="branchBindEdit" :key="branchBindEditKey"></iframe>
        </div>
      </div>
    </el-dialog>

打开关联科技树的对话框时，传递数据给iframe链接的页面中

openBindNode(row) {
   this.mindLoading = true;
   this.branchBindEditKey++;//
   this.addBindingDialog = true;
   this.$nextTick(() => {
     //获取iframe
     let iframe = document.getElementById('branchBindEdit');
     // iframe的加载完成函数
     iframe.onload = function () {
       //将滑选数据传入到iframe中
       iframe.contentWindow.postMessage({ 'mindId': row.id }, '*');
     }
     this.mindLoading = false;
   })
},
// 选中某个节点后完成选择，调接口获取该节点下的所有子节点数据
confirmBranchBind() {
    let branchNode = document.getElementById('branchBindEdit').contentWindow.getSelectedNodeId();
    console.log("branchNode", branchNode)
    if (!branchNode) {
       this.$message.warning("请先选中节点！");
       return false;
    }
    this.technologyTreeList.push({
      'branchId': branchNode.branchId,
      'branchText': branchNode.branchText,
      'mindId': this.bindMindTree.id,
      'mindName': this.bindMindTree.mindName,
    });
    this.addBindingDialog = false;
    this.treeBindingDialog = false;
},

补充

给组件加key值是为了解决实时渲染最新的数据，只能通过key销毁组件再根据最新的数据重新渲染

vue组件销毁方法：1、v-if=" " 2、:key=" "

父窗口向子窗口传值

//获取iframe
let iframe = document.getElementById('branchBindEdit');
// iframe的加载完成函数
iframe.onload = function () {
  //将滑选数据传入到iframe中
  iframe.contentWindow.postMessage({ 'mindId': row.id }, '*');
}

使用postMessage()向子窗口传值

父窗口调用子窗口中的方法
confirmBranchBind() {
      let branchNode = document.getElementById('branchBindEdit').contentWindow.getSelectedNodeId();
      console.log("branchNode", branchNode)
},
getSelectedNodeId() 为要调用的子窗口的方法

子窗口

在子页面的mouted函数中接受父窗口传递的数据，以及注册getSelectedNodeId方法供父窗口调用

 mounted() {
    let _this = this;
    console.log("进入iframe")
    window.addEventListener('message', function (event) {
      if (event.data.mindId) {
        console.log("接受传送过来的id值", event.data.mindId)
        _this.mindId = event.data.mindId;
        _this.getDetailInfo();
      }
    }, false);
    window.getSelectedNodeId = function () {
      let nodes = _this.$refs.minderEditor.minder.getSelectedNodes();
      return { 'branchId': nodes[0].data.id, 'branchText': nodes[0].data.text };
    }
},