Vue中嵌入html页面并相互通信_vue页面中嵌入html

Vue中嵌入html页面并相互通信

引言：由于最近工作中用到了大量的Iframe去集成一些只能通过原生html、css、js开发的功能接口，因此特意做一下过程记录的笔记。方便交流学习使用。

1. Vue中嵌入Html的方式

1.1 html的页面是单独的一个服务，有自己独立的端口地址

可以通过将src中修改需要展示的页面地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互。

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

1.2 html的页面是一个本地页面

嵌入的页面中的所有文件都是本地存在的，这种模式需要通过其他方式去交互，但是不需要将html写成一个单独的服务，直接集成到页面中就可以了。

注意：需要嵌入的页面应该放到public文件下面的static文件夹中,格式就如同下面例子中所示，如果不是这样的话会报错，具体原因不明。

 <iframe src="/static/gantt/test.html" ref="iframe" width="100%" height="900px" scrolling="no"></iframe>
1

2. Vue向html中传递数据

2.1 vue中的代码

在data中定义一个iframe绑定的页面的对象。

iframeWin: {}
1

在mounted中去绑定具体Iframe的页面

this.iframeWin = this.$refs.iframe.contentWindow;
1

发送信息给甘特图

sendIframeWinpMessage() {
	this.iframeWin.postMessage({
		params: "你想传的数据" /*在iframe页面中接收通过key也就是param接收，因此传输的数据可以是对象，包含多个key以及对应的数据*/
	}, "*");
},
1
2
3
4
5

2.2 html中的代码

在html中接收vue端传过来的值

window.addEventListener("message", function (event) {
  var data = event.data;
  console.log("从vue中获得的数据", data);
  // 定义一个变量去接收,然后就可以获得vue传过来的数据
  var test = data.params;
}, '*')
1
2
3
4
5
6

3. html向Vue中传递数据

由于vue可以向iframe页面中传值，同理iframe也可以向vue页面中传值，方式如下。

3.1 html页面中的代码

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

3.2 vue中的代码

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

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

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

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

4. 疑难杂症

4.1 标签页、弹窗展示

当用标签页，或者弹窗对iframe页面展示的时候，可能会出现值不展示的情况，这个时候需要在切换之前将mounted中绑定的方法再绑定一遍。

this.iframeWin = this.$refs.iframe.contentWindow;
1

4.2 html页面值刷新的问题

iframe与vue中监听数据传输的方法都是一直在监听的，当两边有数据发生变化时，相应的数据也会发生变化，页面的刷新可以采用reload等方式，或者重新加载，实时刷新的方式最好是通过iframe页面中的原生js去完成这个功能，在vue中通过监听事件的方式，会导致整个标签页面、弹窗刷新，达不到想要的效果。