PostMessage传参格式

`PostMessage`是一个用于浏览器窗口间通信的技术，在JavaScript中主要用于从一个文档窗口向另一个嵌入在同一浏览器会话中的文档窗口发送消息。其基本语法如下：

parentWindow.postMessage(data, targetOrigin, [transfer]);

这里的参数含义是：
- `data`：需要传递的数据，可以是字符串、对象或者其他JSON序列化的数据。
- `targetOrigin`：目标窗口的URL协议、域名和端口，通常你需要指定一个特定的源（比如 `'http://example.com'` 或 `'*'` 表示任何来源），只有同源请求才会成功。
- `transfer`：可选参数，一个数组，包含那些希望在跨域时也转移过去的数据，通常是Blob或File对象。

例子：

// 主页面
window.addEventListener('message', function(e) {
  if (e.origin !== 'https://child-page.com') return;
  console.log('Received message:', e.data);
}, false);

// 子页面
const parent = window.parent; // 获取顶层窗口
parent.postMessage('Hello from child page!', '*');

相关问题

小程序和h5使用postmessage传参

小程序和H5都支持使用postMessage方法进行跨页面通信，但使用方式略有不同。

在小程序中，可以使用wx.miniProgram.postMessage方法发送消息，接收消息需要在目标页面的onMessage回调中进行处理。具体步骤如下：

1. 发送消息：

wx.miniProgram.postMessage({
  data: {
    message: 'Hello MiniProgram'
  },
  success: function() {
    console.log('发送成功')
  },
  fail: function() {
    console.log('发送失败')
  }
})

2. 接收消息：

onMessage: function(e) {
  console.log('接收到消息', e);
  // 处理接收到的消息
}

在H5中，可以使用window.postMessage方法发送消息，接收消息需要在目标页面的window.onmessage回调中进行处理。具体步骤如下：

1. 发送消息：

window.parent.postMessage({
  message: 'Hello H5'
}, '*')

2. 接收消息：

window.onmessage = function(e) {
  console.log('接收到消息', e);
  // 处理接收到的消息
}

需要注意的是，在小程序中，postMessage只能在一个小程序内的不同页面之间进行通信，而在H5中，postMessage可以在不同域名、不同协议、不同端口的窗口间进行通信。

vue 使用iframe 调用另一个vue页面,使用postMessage传参无效

如果您在Vue中使用iframe来调用另一个Vue页面，并尝试使用postMessage传递参数，但是无效，可能是因为您需要确保以下几点：

1. 确保在iframe中加载的Vue页面和包含iframe的Vue页面都可以正确访问postMessage函数。

2. 确保您已正确设置postMessage函数的接收方，并通过监听message事件来接收数据。

3. 确保您的数据已正确序列化，以便在postMessage中传递。

4. 确保您的数据已正确传递到接收方，并且已在接收方中进行正确的反序列化。

如果您已经按照以上步骤操作，但仍然无法传递参数，请检查您的代码是否存在其他问题。您可以尝试使用浏览器的开发者工具来调试您的代码，并查看是否存在任何错误。