JavaScript 中怎么用 postMessage 传递复杂的结构化克隆数据-js教程-PHP中文网

postmessage可安全传递符合结构化克隆规范的数据，如对象、数组、map、set、date、regexp等；函数、undefined、dom节点等会抛出datacloneerror。

javascript 中怎么用 postmessage 传递复杂的结构化克隆数据

JavaScript 中用 postMessage 传递复杂数据（如嵌套对象、数组、Date、Map、Set、RegExp 等）是完全可行的，前提是这些数据能被结构化克隆算法（Structured Clone Algorithm）正确序列化。现代浏览器已广泛支持该算法（Chrome 96+、Firefox 94+、Safari 15.4+），不再依赖 JSON 序列化限制。

哪些数据能安全通过 postMessage 传递

只要满足结构化克隆规范，以下类型可直接传递，无需手动序列化：

普通对象、数组、Map、Set、TypedArray（如 Uint8Array）、DataView
Date、RegExp、Blob、File、ImageBitmap、ArrayBuffer（含 SharedArrayBuffer）
稀疏数组、带有 getter/setter 的对象（值会被克隆，访问器本身不保留）
循环引用对象（现代结构化克隆已支持，但需注意兼容性）

哪些数据会出错或被忽略

以下类型无法克隆，调用 postMessage 时会抛出 DataCloneError 异常：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

函数、undefined、Symbol、Promise、WeakMap、WeakSet
DOM 节点、window、document、element 等宿主对象
带有不可枚举属性或私有字段（#field）的类实例（除非显式定义 toJSON 或自定义序列化）
包含非法原型链的对象（如直接设置 __proto__: null 后再添加不可枚举属性）

实际使用建议和注意事项

确保跨上下文通信稳定可靠，注意以下几点：

始终指定 targetOrigin：避免写成 '*'，尤其传敏感数据时，应明确目标源（如 'https://example.com'）
监听方需校验 event.source 和 event.origin：防止接收伪造消息
大对象注意性能：结构化克隆虽高效，但超大 ArrayBuffer 或深层嵌套对象仍可能引发主线程卡顿；必要时考虑分块传输或 Worker 处理
兼容旧环境需降级：若需支持 Safari 15.3 或更早版本，可用 JSON.stringify + JSON.parse 配合自定义转换（如把 Date 转为 ISO 字符串，RegExp 转为 { pattern: '', flags: '' }）

一个安全的双向通信示例

父页面向 iframe 发送带 Map 和 Date 的对象：

// 父页
const iframe = document.querySelector('iframe');
const data = {
  id: 123,
  name: 'test',
  timestamp: new Date(),
  tags: new Set(['a', 'b']),
  metadata: new Map([['version', 2], ['active', true]])
};
iframe.contentWindow.postMessage(data, 'https://target.example.com');

// iframe 内
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://parent.example.com') return;
  console.log(e.data); // { id: 123, ..., timestamp: Date, tags: Set, metadata: Map }
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南