Vue iframe实现跨域通信

一、前言

什么是iframe？

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

什么是postMessage？

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

二、应用场景

在一个项目的页面中嵌入另一个项目的页面，需要实现父子，子父页面的通信。

2.1 嵌入页面

iframe使用如下（端口为8080）：