Vue Iframe postMessage双向数据通信 + 跨域

iframe：IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

一、vue向iframe传递信息

vue页面

<iframe id="iframe_content" :src="iframeSrc" width="100%" height="100%"> </iframe>

data() {
  return {
    iframeSrc: 'http://localhost:8080'
  };
},

mounted() {
  // vue向iframe传递信息
  const _iframe = document.getElementById('iframe_content')   
  if (_iframe) {
    if (_iframe.attachEvent){ // 兼容浏览器判断
       _iframe.attachEvent("onload", () =>{ 
         _iframe.contentWindow.postMessage('传递的信息', this.iframeSrc)
       })
     } else { 
       _iframe.onload = () =>{ 
         _iframe.contentWindow.postMessage('传递的信息', this.iframeSrc)
       } 
    }
  }
}

iframe页面

mounted() {
  window.addEventListener('message', function (event) {
    if (event.origin.includes('http://localhost:8080')) {
      console.log(event.data); // 传递的信息
    }
  })
}

二、iframe向vue传递信息

iframe页面

window.parent.postMessage({ 
  cmd:'myIframe',
  params: {
    info: '可以进行下一步了',
  } 
 }, '*'); // * 任何地址都可以，可以指定地址

vue页面

methods: {
  // 获取iframe传递过来的信息
  getiframeMsg(event){
    const res = event.data;
    if(res.cmd == 'myIframe'){
       console.log('可以进行下一步了')
    }
  },
}

  欢迎扫码下方二维码关注VX公众号