vue 给iframe设置src_Vue 中嵌入 iframe 并进行双向通信的完整流程

背景

Vue 应用中，需要使用 el-dialog 弹出一个 iframe 页面，该页面来源于其他项目，这就要解决 Vue 父页面和 iframe 子页面的两个通信问题：

Vue 父页面向 iframe 子页面传递初始化数据

子页面的关闭按钮，需要通知父页面关闭 el-dialog

本文将整理 Vue 中嵌入 iframe 并进行双向通信的完整过程。

子页面直接调用父页面方法的跨域问题

理论上，如果 iframe 的 src 跟父页面同源，是可以直接用 window.parent.func 方法调用父类的 close 方法，完成 el-dialog 弹框关闭的。

但是，如果不同源，就会报错：

DOMException: Blocked a frame with origin "http://localhost:8085"

from accessing a cross-origin frame.

网上搜索到的解决办法是，使用 iframe 的 contentWindow.postMessage 方法传递数据给子页面。但是有一个问题，什么时候调能得到真正的 iframe 对象呢？

父组件传递数据的时机

经过反复测试，笔者发现：如果直接在 Vue 父组件的 created 方法中向 iframe 传递数据，此时 iframe 因为并没有被访问，导致无法传数据，无论是通过 id 还是 $refs 都不能获取到这个 iframe 对象。

看这段网上搜到的通用方法：

@close="closeSelf" title