VUE中iframe结合window.postMessage实现

什么是iframe？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

什么是postMessage？

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

使用场景：

在一个项目的页面中嵌入另一个项目的页面，两个项目不遵循同源策略（跨域），需要实现父子，子父页面的通信。

父页面为项目1，端口为8080
父页面的iframe嵌入项目2，端口为8081

          <iframe
            src="http://192.168.0.25:8081"
            id="myIframe"
            ref="myIframe"
            width="100%"
            frameborder="0"
            scrolling="auto"
          ></iframe>

那么如何使用window.postMessage通讯呢

父页面向子页面通讯

父页面中

mounted() {
    this.$nextTick(() => {
      // 这里选中iframe的元素DOM时，不要用vue的this.$refs['myIframe']
      var iframe = document.getElementById("myIframe");
      // 需要走一下iframe的onload加载事件
      iframe.onload = () => {
        // 向domain2发送跨域数据
        iframe.contentWindow.postMessage(
          {
            cmd: "success",
            data: "我是父页面发给子页面的数据",
          },
          "*"
        );
      };
    });
  },

子页面中

mounted() {
    window.addEventListener('message', this.handleMessage);
},
beforeDestroyed() {
    window.removeEventListener("message", this.handleMessage);
},
methods: {
     handleMessage (event) {
       const data = event.data
        if(data.cmd === "success"){
            alert(data.data)
        }
 }

子页面向父页面通讯
子页面中

 submit() {
   // 向父vue页面发送信息
   window.parent.postMessage({
     data: {
       cmd:"success",
       data:"我是子页面向父页面发送的数据！"
     }
   }, '*');
 }

父页面中

mounted() {
    window.addEventListener('message', this.handleMessage);
},
beforeDestroyed() {
    window.removeEventListener("message", this.handleMessage);
},
methods: {
     handleMessage (event) {
       const data = event.data
        if(data.code === "success"){
            alert(data.data)
        }
     }
}