前言:在网上找了很多,大多给出的方式,只是在页面上首次加载的时候才会有值,以后再刷新网页,值就变成了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)})