Failed to execute 'postMlessage' on "Window': [object Array could not be cloned

记录一下这个问题，

这个错误可能是因为 postMessage 方法要求传递的参数是可序列化的对象。如果传递的参数不是可序列化的对象，例如包含函数声明、对象引用等，它就会失败并抛出这个错误。 要解决这个问题，可以尝试将要传递的数据序列化为字符串，然后再进行传递。也可以使用 JSON 序列化和反序列化数据，以确保它们符合要求。

代码语言：javascript复制

vardata = [{ name: 'John', age: 30 }, { name: 'Jane', age: 28 }]; 
var serializedData = JSON.stringify(data); 
contentWindow.postMessage(serializedData, '*');

当使用vue3响应式时 通过iframe发送postMessage,要将被代理的对象转换为原始对象也就是使用toRaw()后在进行发送。

代码语言：typescript复制

import {ref, toRow } from 'vue'; 
const data = ref({ a: 10 });
const message = {};

message['data'] = toRaw(data);

contentWindow.postMessage(serializedData, '*');

javascript vue3 iframe

0 人点赞