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)
    })