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="弹框配置" >

frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"

width="100%" height="726px;">

此时，如果在 created 方法中传递数据：

created() {

// 监听子组件的关闭事件消息

window.addEventListener('message', () => {

this.closeSelf();

}, false);

// 向子组件传递初始化数据

this.$refs.myframe.contentWindow.postMessage(data, '*'); // 取到的是 undefined

const iframe = document.getElementById('myframe'); // 为 null

iframe.contentWindow.postMessage(data,"*");

},

代码运行会报两种错误。

错误一，$refs 中没有该组件：

在这里插入图片描述

错误二，id 为 myframe 的元素为 null：

在这里插入图片描述

解决办法：在 iframe 的 load 事件中向子页面传递数据，上面两种用法就不会报错了。

完整流程

父组件的 created 中监听子组件消息，调用关闭逻辑；同时，为 iframe 提供一个 @load="loaded" 事件，在该事件中调用 postMessage 向子组件发送初始化数据。

首先，弹框 Vue 组件 PopupIframe.vue 代码如下：

@close="closeSelf" title="Ifram配置">

id="myframe"

@load="loaded"

ref="myframe"

:src="src" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" width="100%" height="726px;">

export default {

name: 'PopupIframe',

props: ['showIFrame'],

data() {

return {

src: '',

data: {

},

};

},

created() {

// 设置 src

this.src = 'http://localhost:8087/myIfram.html";

// 监听子组件的关闭事件

window.addEventListener('message', () => {

this.closeSelf();

}, false);

},

methods: {

loaded() {

// 只有在 iframe 加载时传递数据给子组件，$refs 才是非空的

this.$refs.myframe.contentWindow.postMessage({

type: 'myData',

data: this.data,

}, '*');

},

closeSelf() { // 关闭当前弹框

this.$emit('closeIframe');

},

},

};

第二步，iframe 子页面添加监听数据的方法：

window.addEventListener('message', (e) => {

console.log(e.data);

if (e.data.type === 'myData') {

// TODO 使用父组件传递的初始化数据

}

});

第三步，iframe 的页面的关闭按钮向父组件发送消息，通知关闭：

window.parent.postMessage('close', '*');

PopupIframe.vue 被其他组件引用就可以了。

postMessage 数据类型

测试发现，this.$refs.myframe.contentWindow.postMessage 向 iframe 子组件发送数据后，子组件收到的数据除了第一步定义的数据外，还有其他数据，它的监听方法里面会执行两次：

在这里插入图片描述

这说明，框架也向子组件发送了一些数据，类型为打包的告警数据。

因此，父组件传递数据时，也可以按照这个格式添加一个 type 标识我们的数据，前面第二步操作中，子组件使用时再根据它处理自己需要的数据。

总结：本文的核心知识点是 iframe 的 load 事件，要想顺利传递数据给 iframe ，必须在这里调用才能得到 iframe 对象。