postMessage vue iframe传值

子页面

绑定方法接受父级页面传过来的值

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'
        },'*')