如何实现页面与iframe之间高效通信的方法有哪些？

本文共计848个文字，预计阅读时间需要4分钟。

目录 + 引用 + iframe + 向父级页面发送消息 + 父级页面向 iframe 发送消息 + 接收消息 + 指定发送消息的域名 + 引用 + 本文介绍如何实现页面与 iframe 之间的通信，实际工作中可能遇到困难，但一旦实现，效果显著。

目录

• 引言
• iframe 向父级页面发送消息
• 父级页面向 iframe 发送消息
• 接收消息
• 指定发送消息的域名

引言

这篇文章介绍如何实现页面与 iframe 进行通信，实际工作中可能很难遇到，但一旦遇到了，我们要能够立即想到怎样去实现。

iframe 向父级页面发送消息

在 iframe 页面，使用 window.parent 调用 postMessage 方法，即可发送消息给父级页面。

window.parent.postMessage(message, '*');

message 只能是 String 类型，所以如果想发送多条数据，可以使用 JSON 序列化对象。

// 序列化对象 const message = JSON.stringify({ message: 'Hello', date: Date.now(), }); window.parent.postMessage(message, '*');

使用 JSON.stringify 方法对内容进行序列话，即可在传入 postMessage 方法。