子页面
绑定方法接受父级页面传过来的值
window.addEventListener('message', messageEvent=> { if(messageEvent.source!=window.parent) return; console.log('子收到messageEvent:',messageEvent); console.log('子收到vue的数据:',messageEvent.data); this.wpsData = messageEvent.data; // if(messageEvent.data&& this.onAjax){ // this.onAjax = false; // this.getDriverInfoQp(messageEvent.data); // } })
父页面代码
<iframe src="http://120.224.237.214:81/qingpi/index.html#/driverIfram" frameborder="0" width="1000" height="800" id="mainIframe" ref="mainIframe" name="mainIframe" ></iframe>
<el-button @click="setData('我是vue数据')">向iframe中发送数据</el-button>
const mapFrame = this.$refs['mainIframe']; mapFrame.onload = function() { const iframeWin = mapFrame.contentWindow // iframeWin.postMessage('父传给子的值', 'http://192.168.29.183:9527') iframeWin.postMessage({ value: '父传给子的值', id: 'qp' }, '*') }
postMessage会多对次传值,传值带判断字符串传值,根据id判断是否是自己需要的值。
子传父写法
window.parent.postMessage({ value: '子传给父的值', id: 'qp' },'*')