vue 通过iframe引入html资源，并传递参数

在vue开发中，有时我们需要在项目中嵌入第三方的html页面，我们可以使用iframe标签来实现。

Vue中嵌入Html有两种方式

（1）html作为一个单独的服务，iframe标签中src填入远程地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互。

<iframe src="http://127.0.0.1:8081/demo31.html"  width="100%" height="800px" scrolling="auto"></iframe>

（2）vue项目集成html页面，这样不需要其他服务，但是需要实现vue和html的通信。

<iframe src="static/grhx/IndividualPortrait.html" ref="iframe" scrolling="no" style="width:100%; height: 35vw"></iframe>

我在项目中实现的是第二种方式，html作为本地页面集成的。

实现步骤：

1.在public下的static引入html页面和js，css等资源

2.vue页面通过iframe标签嵌入html资源

3.vue向html传递数据

通过获取iframe对象，然后调用postMessage方法：

4.html页面接收数据

通过监听事件window.addEventListener实现

5.html向vue传递数据

// 向vue中发送数据
window.parent.postMessage({
  params: "你想传输的值",
  cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
},'*');

6.vue接收数据

在mounted中加载监听事件，并配上处理监听对象的方法。

window.addEventListener("message", this.handleMessage);

在method中定义方法，用于处理监听的事件。

handleMessage(event) {
 	// 获取从iframe页面中传过来的值
 	var cmd = event.data.cmd;
 	var params = event.data.params;
 }

以上就完成了vue项目嵌入html的功能。