【vue页面调用iframe嵌入页面方法并且传值，iframe里调用外部vue页面方法】

文章目录

前言

1.外部vue页面

2.iframe页面

总结

---

前言

需求：

        vue项目里嵌入iframe页面，需要调用iframe页面里的方法并且把值传入进去来进行执行后续操作，如执行成功，需要在返回调用外部vue页面方法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、具体代码

1.外部vue页面

代码如下（示例）：

<!--
    vue页面嵌入所要嵌入的iframe
-->
<template>
  <div>
    <iframe ref="iframe" :src="iframeSrc" id="iframeId"></iframe>
    <el-button @click="driveFlowInstance('测试')">点击</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: "" //这是要嵌入的页面url 这里就不写了
    };
  },
  methods: {
    //外部调iframe里方法
    //触发方法，type需要传入的值//调用iframe里的方法并且传值
    driveFlowInstance(type) {
      var iframe_home = document.querySelector("#iframeId");
      //["updateDubanForm"]这一部分是调用iframe里的方法命，里面"updateDubanForm"可以换成一个变量.
      //也可以写成iframe_home.contentWindow.updateDubanForm(type);
      iframe_home.contentWindow["updateDubanForm"](type);
    },

    //iframe里调外部方法
    //方法名一定要保持一直，不然调用不到
    iframeTextClick(row) {
      console.log(row);
    }
  },

  async mounted() {
    //iframe里调外部方法
    //因为是vue的语法进行写，一定要这样把方法进行生命，不然iframe回调这个方法找不到
    window.iframeTextClick = this.iframeTextClick;
  }
};
</script>

<style scoped></style>

2.iframe页面

代码如下（示例）：

<!--
    iframe页面这里我是用vue来写的
-->
<template>
  <div>
    <!--这是iframe页面回调于外部页面按钮并且回调传值-->
    <el-button @click="textClick('测试1122')">iframe调外部方法</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //外部调用iframe里方法
    //这是vue要调用的方法，方法命要和外部调用的一致
    updateDubanForm(type) {
      console.log(type);
    },

    //iframe里调外部方法
    //按钮触发方法，iframe回调执行外部方法
    textClick(row) {
      //回调
      window.parent.iframeTextClick(row);
    }
  },
  //初始化窗体
  mounted() {
    //外部调用iframe里
    //因为是vue的语法进行写，一定要这样把方法进行生命，不然外部调用这个方法找不到
    window.updateDubanForm = this.updateDubanForm;
  }
};
</script>

---

总结

提示：这里我把外部调里，里调外我都整合在一起写了，具体看注解。