vue 与 iframe之间传参

 做的一个项目使用到了svg图，使用iframe 导入，并且需要向iframe传递参数，遇到的小问题，在此记录一下。

vue使用iframe导入svg页面：

<!-- vue -->
<iframe class="iframe" ref="mainIframe" src="static/plant/beiChang.html"  frameborder="0"></iframe>

   

请求接口并向iframe传递：

created(){
    //请求接口
    getJson(){ 
      XXX.then(res => { 
        if(res == 200){ 
          // 使用ref 获取 dom 
          const mapFrame = this.$refs['mainIframe'] 
          // 因为iframe页面打开就已经加载 获取接口成功后刷新他                   
          mapFrame.contentWindow.location.reload()       
            if (mapFrame.attachEvent) { 
              // 兼容浏览器判断 // iframe的加载完成函数         
                mapFrame.attachEvent('onload', function () {           
                  const iframeWin = mapFrame.contentWindow 
                  //传递参数           
                  iframeWin.postMessage(res.data.result, '*')        
                })       
            } else { 
              // iframe的加载完成函数         
              mapFrame.onload = function () {           
                const iframeWin = mapFrame.contentWindow 
                  //传递参数           
                  iframeWin.postMessage(res.data.result, '*')         
                }       
            } 
        } 
    }) 
  }
},

 iframe接收vue传递过来的参数：

<!-- iframe -- > 
// 接收参数 
window.addEventListener('message', function (messageEvent) { 
    var data = messageEvent.data; 
}, false);