vue 本地自测iframe通讯

使用 postMessage  API 来实现跨窗口（跨域）的消息传递。postMessage 允许你安全地发送消息到其他窗口，包括嵌套的 iframe，而不需要担心同源策略的问题。

发送消息（父应用）

1. 父应用：发送消息给子应用

父应用可以通过 postMessage 将消息发送给子应用。需要注意的是，发送消息时，需要指定目标窗口和目标窗口的来源（即目标 iframe 的 origin），以确保安全性。

 iframe.contentWindow.postMessage(message, targetOrigin)

 使用 postMessage 向子应用发送消息。message 是要发送的数据，可以是任何 JavaScript 对象。targetOrigin 是目标窗口的源（例如：http://child-app.com），它确保消息只发送到具有这个源的窗口。

2、接收消息（子应用）

子应用通过监听 message 事件来接收父应用发送的消息。收到消息后，子应用可以根据消息中的 type 字段来执行不同的操作。

示例：父应用与子应用通信

1. 父应用：发送消息给子应用

父应用通过 postMessage 向 iframe 中的子应用发送一个包含 type 的消息。我们还可以通过 targetOrigin 来确保消息只发送到指定的子应用。

  
  
  


  
Parent Application
  
  
  

  发送消息到子应用

  

2. 子应用：接收父应用发送的消息

子应用会监听 message 事件，接收到消息后可以处理它。通常可以根据 message.type 来决定如何处理消息。

  
  
  


  
Child Application
  
  
  

如何在vue本地项目进行iframe测试通讯

1、新建一个iframe.vue页面，为父页面

// 父应用

 

2、子应用