vue中使用iframe嵌套html页面并传值到html

前言：在网上找了很多，大多给出的方式，只是在页面上首次加载的时候才会有值，以后再刷新网页，值就变成了undefined,甚至不走子页面中的方法。

下面给出的方法，每次刷新都会有数据到子页面html.

vue页面

<iframe scrolling="no" ref="vueIframe" @load="loaded" frameborder="0" :src="`${publicPath}/html5/monitor.html`" style="width: 100%;height: 100%;"></iframe>

一定要在iframe里定义@load，不然不传值。

mounted() {this.iframeWin = this.$refs.vueIframe.contentWindow;},

methods: {loaded(){this.iframeWin.postMessage(this.resultData,'*');}}

子页面html

window.addEventListener('message',function (msgEvent) {let result = msgEvent.data;$('#data1').html(result.port)})