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