JS 原型链怎么跨 iframe 传递并保持关系-js教程-PHP中文网

javascript原型链无法跨iframe传递，仅同源时可通过contentwindow共享原型；跨域时只能通过postmessage传递序列化数据，需手动标注类型并重建对象。

js 原型链怎么跨 iframe 传递并保持关系

JavaScript 原型链本身不能跨 iframe 传递并保持关系——这不是实现方式的问题，而是浏览器安全模型和 JS 执行上下文的底层限制。

跨 iframe 时，原型链天然断裂。你看到的“传递对象”，其实是数据拷贝（序列化 + 重建），不是引用共享。

同源 iframe 才可能保留原型链行为

只有当父页面与 iframe 完全同源（协议、域名、端口三者一致）时：

可直接访问 iframe.contentWindow.obj
obj instanceof Array、obj.constructor === Array 等判断才有效
原型链查找会顺着 iframe 内部的 Object.prototype 进行，且该 Object 与父页是同一个构造函数

✅ 示例（同源）：

// 父页和 iframe 都在 https://example.com
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
  const arr = iframe.contentWindow.Array.of(1, 2, 3);
  console.log(arr instanceof Array); // true（两边 Array 是同一个函数）
  console.log(arr.__proto__ === Array.prototype); // true
};

⚠️ 注意：即使同源，也要等 iframe 加载完成再访问 contentWindow，否则为 null。

跨域 iframe 下原型链必然丢失

一旦跨域（哪怕只是子域不同，如 a.example.com ←→ b.example.com）：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

iframe.contentWindow 访问被拒绝，抛 SecurityError
唯一合法通信方式是 postMessage
postMessage 只能传可序列化的值（JSON-safe）：普通对象、数组字面量、字符串、数字等
函数、Date、RegExp、Map、Set、自定义类实例、DOM 节点等全部丢失
接收方拿到的是全新对象，其 __proto__ 指向本页的 Object.prototype，与发送方无关

❌ 常见误解：

// 子 iframe 发送
iframe.contentWindow.postMessage(new Date(), 'https://parent.com');

// 父页收到
window.addEventListener('message', e => {
  console.log(e.data instanceof Date); // false！e.data 是字符串
  console.log(e.data); // "2026-10-10T15:42:00.000Z"
});

想“模拟”原型关系？得手动约定和重建

如果业务需要识别类型或恢复行为，必须自己加标记、自己反序列化：

发送前标注类型：

iframe.contentWindow.postMessage({
  $type: 'User',
  value: { name: 'Alice', id: 123 }
}, 'https://parent.com');

接收后手动构造：

window.addEventListener('message', e => {
  if (e.origin !== 'https://child.com') return;
  const { $type, value } = e.data;
  let obj;
  if ($type === 'User') {
    obj = new User(value.name, value.id); // 注意：User 必须在父页定义
  } else if ($type === 'Date') {
    obj = new Date(value);
  }
  // ……
});

⚠️ 关键提醒：