如何优雅的实现 iframe 多层级嵌套通讯

前言

在前端开发项目中，不可避免的总会和 iframe 进行打交道，我们通常会使用 postMessage 实现消息通讯。

如果存在下面情况：

• iframe 父子通讯
• iframe 同层级通讯
• iframe 嵌套层级通讯

当面对这种复杂的情况的时候，通讯不可避免成为复杂问题。

快速开始

为了解决这复杂的问题，我开发了 iframe-bridge 来帮助大家优雅的解决这类问题。

npm install bridge-iframe
# pnpm
pnpm install bridge-iframe
# yarn
yarn add bridge-iframe

假设页面层级如下：

• Main
  • Main/Node1

主页面（Main）

<h1>Main</h1>
<iframe src="Node1.html" id="Node1"></iframe>

import {
    IFrameBridge, IFrameMessage } from 'bridge-iframe';

// 创建桥接对象
const bridge = new IFrameBridge;
// 连接直接下属节点 Node1 关联 iframe 窗口
birdge.ifrme('Node1', document.getElementById('Node1'));

// 提供给其他 iframe 节点调用的方法（可以定义无数个）
birdge.on('say', async (vo: IFrameMessage) => {
   
	vo.getData(); // 获取请求数据
	vo.getResult(