iframe之间的通信如何实现？，有哪些方法？

iframe之间通信的核心方案是postMessage，它是跨域场景下唯一安全、标准化的通信方式，同源时则可以直接操作DOM。

iframe通信方式有哪些：三种主流方案对比

开发中遇到iframe嵌套页面,通信需求绕不开，父页面要告诉子页面用户登录状态，子页面要通知父页面调整高度，这些都在iframe通信范畴内，行业内主流方案就三种：同源直取DOM、postMessage消息推送、hash和name兜底。

加载中

[6.20]--6-22【连环问】如何实现网页和iframe之间的通讯

bili_11721745314

5845-

原视频地址

同源页面：直接操作contentWindow和parent

同源策略下,页面之间没有隔离墙，父页面拿到iframe的DOM后，可以通过contentWindow直接调用子页面的全局函数，也能直接读写子页面的DOM节点，反过来，子页面用window.parent拿到父页面的window对象，一样可以操作。

这种方式的优点在于简单粗暴,没有序列化开销，数据类型完整保留，父页面传一个对象给子页面，子页面收到后还能保持原型链，这在postMessage里做不到，缺点也很明显，只要跨域，这条路直接断了。

实际操作中,父页面这样干：

const iframe = document.getElementById('childFrame');
iframe.contentWindow.syncUserInfo({
  id: 1001,
  name: '张三'
});

子页面这样回传：

window.parent.receiveResult('同步完成');

同源场景下这种直连方式性能最好,也不需要等iframe触发load事件才能通信，但要注意一个细节，iframe还没加载完时，contentWindow上的方法调用会直接报错，多数实际项目中会先监听onload事件再操作。

iframe之间如何通信：postMessage的跨域通行证

跨域场景是iframe通信问题的高发地,页面部署在a.com，内嵌的第三方地图在b.com，两者协议、域名、端口任一不同，同源直连全部失效，行业共识认为，postMessage是解决这类问题的标准手段。

postMessage的本质是消息发布订阅模式,发送方调用targetWindow.postMessage(message, targetOrigin)，接收方在window上监听message事件，关键点在于，接收方拿到的event.data就是发送方传过来的数据，event.origin能确认消息来源，event.source能拿到发送方的window引用，用于回传消息。

父页面发送消息的完整写法：

const childFrame = document.getElementById('partnerFrame');
childFrame.contentWindow.postMessage({
  type: 'AUTH_TOKEN',
  payload: {
    token: '加密后的身份凭证',
    expiredAt: Date.now() + 7200000
  }
}, 'https://partner.com');

第二参数targetOrigin不要随便传，明确指定目标源，可以避免消息被其他窗口截获，如果你不确定子页面的准确域名，宁可先用调试，上线前也一定要收回来。

子页面接收消息并在三个场景下回传

子页面内部监听消息,写法上统一用以下模板：

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://parent.com') return;
  const { type, payload } = event.data || {};
  switch (type) {
    case 'AUTH_TOKEN':
      handleAuth(payload);
      event.source.postMessage({ type: 'AUTH_SUCCESS' }, event.origin);
      break;
    case 'SYNC_HEIGHT':
      handleHeightSync(payload);
      break;
    default:
      break;
  }
});

回传数据时有个细节容易被忽略：使用event.source作为回传目标，比重新用window.parent更可靠，在嵌套多层级iframe中，event.source指向实际发消息的那个窗口，而window.parent只会往上走一级，多层嵌套时容易传错对象。

iframe如何跨域通信：postMessage的完整实战

postMessage解决跨域通信时,数据格式、安全校验、时序问题都要考虑到，接下来按完整生命周期拆解。

父页面主动推送消息给子页面

父页面等iframe加载完成后,才能推送消息，实际操作中，有人直接在load事件里发，有人放在业务逻辑回调里发，推荐封装成一个函数，统一管理：

function sendToChild(payload) {
  const child = document.getElementById('appFrame');
  if (child && child.contentWindow) {
    child.contentWindow.postMessage(payload, 'https://child-domain.com');
  }
}

持续追踪iframe加载状态,用readyState判断更稳妥，有些场景下iframe内容跨域加载时间长，load事件触发晚，业务代码提前执行就会丢消息，这种情况下，可以让子页面加载完成后主动向父页面发一条READY消息，父页面收到后再批量发送积压的数据。

子页面监听到消息后完成业务并回传

子页面拿到的消息结构建议统一为{ type, payload, requestId }。requestId用于关联请求和响应，父页面发消息时生成一个唯一ID，子页面回传时带上同一个ID，父页面就能精准匹配回调。

function sendToParent(data) {
  if (window.parent !== window) {
    window.parent.postMessage({
      type: 'CHILD_RESPONSE',
      requestId: data.requestId,
      payload: data.result
    }, '');
  }
}

这里回传时targetOrigin用了，是因为子页面不知道自己被嵌在哪个域名下，如果是固定合作方，建议把父页面域名写死在配置里，不要用通配符。

数据序列化和兼容性处理

postMessage传数据时,浏览器会做结构化克隆，普通对象、数组、字符串都支持，但函数、Symbol、DOM节点会被丢弃，传Date对象时，部分旧浏览器会转成字符串，收到后要重新new Date()。

兼容性上,postMessage在IE8+就开始支持，主流浏览器全部可用，不过IE里有个特性差异：IE8和IE9只支持传字符串，传对象会被强转成[object Object]，如果历史项目还在兼容IE，需要在发送端统一做JSON.stringify，接收端再JSON.parse。

iframe通信常见问题排查思路

实际开发中,梳理iframe通信遇到的故障，集中在三个地方。

不校验event.origin，等于给攻击者开后门

接收消息时不校验来源,恶意页面可以用隐藏iframe嵌入你的页面，然后伪造消息触发你的业务逻辑，比如你的页面收到SYNC_HEIGHT就调整iframe高度，攻击者可以传入超大数值，撑破你的页面布局，实现钓鱼效果。

修复方法很简单,每次message事件回调第一行就校验：

if (event.origin !== 'https://trusted-domain.com') return;

安全敏感操作,比如修改密码、绑定手机号，建议不仅校验origin，还要校验event.source的指向，防止重放攻击。

iframe如何通信才能避免消息丢失

iframe通信失败的一个常见原因是时序,父页面发消息时，子页面还没执行完监听器注册代码，子页面加载是异步的，但很多人忽略了脚本执行顺序。

解决场景比较复杂时,可以引入握手机制，子页面通过document.readyState判断自身加载状态，完成后向父页面发HANDSHAKE消息，父页面维护一个待发送消息队列，收到握手消息后按顺序发送队列中的消息，这套机制能有效解决消息丢失，在微前端场景中尤其好用。

嵌套iframe层级过深导致通信链路断裂

场景：父页面A嵌套了子页面B，B又嵌套了孙页面C，A要直接给C传数据，如果只靠window.parent逐级转发，链路长且中间层必须配合改造。

更干净的方案是让A和C直接建立通信链路,C在加载完成后，可以通过window.top判断顶层窗口，然后向顶层发送注册消息，顶层维护一个iframe实例表，这样深层通信只经过一次postMessage，不依赖中间层转发，也方便统一管理消息路由。

iframe通信场景如何选型：同源直连还是postMessage

选型问题没有标准答案,但可以按场景分类。

选型时还要考虑一个问题：postMessage本身不是免费午餐，每次发送消息都要经过结构化克隆，数据量大的时候性能衰减明显，如果一次要同步几十KB的数据，可以考虑用MessageChannel直接建立点对点通道，或者在前端把数据压缩后再发送。

iframe通信的核心路径就一条：同源优先走直连，跨域统一走postMessage，消息校验不能省，时序问题一定要做握手，记住这三件事，大部分iframe通信需求都能稳稳落地。

iframe通信开发中的性能和安全底线

安全底线比功能实现更重要,iframe通信如果被注入恶意消息，轻则页面异常，重则用户数据泄露，开发者必须做到三条：

• 来源白名单：所有收到的消息必须先校验origin，白名单之外一律丢弃。
• 校验：即使来源可信，消息内部的type和payload也要做合法性校验，防止脏数据进入业务逻辑。
• 密钥隔离：涉及登录态或支付等敏感信息时，不要在postMessage里明文传输完整凭证，只传一次性票据(one-time ticket)，业务侧再通过接口换取真实凭证。

性能上,postMessage消息频率要控制，现在很多前端页面频繁触发scroll或resize事件，如果每次都用postMessage通知父页面调整高度，会产生大量冗余消息，常见做法是使用requestAnimationFrame节流，即使滚动事件每秒触发60次，也只发送一帧。

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      syncHeightToParent();
      ticking = false;
    });
    ticking = true;
  }
});

统计数据表明,这种节流方式能减少大约80%的消息量，页面滚动性能改善明显。

关于iframe通信的常见疑问解答

iframe之间如何通信而不依赖父页面中转？

两个平级iframe之间不能直接用postMessage通信,必须要经过父页面中转，父页面维护两个iframe的引用，当其中一个iframe发消息给父页面时，父页面识别消息体中的目标iframe标识，然后再用targetIframe.contentWindow.postMessage()把消息转发过去，如果两个iframe同源，还可以通过window.top获取到对方引用后直接操作，但跨域场景必须中转。

iframe通信时如何保证消息不丢失？

消息丢失的根源是时序问题,最佳实践是建立握手协议：子页面注册message监听器后，主动向父页面发送一条READY状态消息；父页面维护待发消息队列，只有收到子页面的READY后才开始推送业务消息，如果消息本身有强一致性要求，建议在每条消息中携带递增序号，接收方检测到序号不连续时主动请求补发，保证消息完整有序。

iframe跨域通信的postMessage安全校验有哪些要注意的？

第一,接收消息时必须校验event.origin，只放行白名单域名，第二，消息内容要定义清晰的协议格式，type字段做枚举校验，不认识的类型直接忽略，第三，event.source要和预期的目标窗口比对，防止消息被第三方窗口冒名接收，针对敏感操作，建议在消息体中加入短期有效的token字段，每次发送前向后端申请，接收方校验通过后才执行，这个机制能有效防止重放攻击。