diff --git a/packages/iframe-bridge/README.md b/packages/iframe-bridge/README.md new file mode 100644 index 0000000..a56495a --- /dev/null +++ b/packages/iframe-bridge/README.md @@ -0,0 +1,141 @@ +# @teres/iframe-bridge + +一个基于 [Penpal](https://github.com/Aaronius/penpal) 的轻量 iframe 通信桥,帮助宿主页面与子应用(iframe)安全、稳定地进行双向方法调用与状态同步。 + +## 为什么需要它 +- 将跨项目的交互(如语言切换、导航、关闭、就绪通知)抽象为清晰的 API。 +- 在 Monorepo 或多项目场景下,提供“宿主 ↔ 子应用”的统一通信约定。 +- 屏蔽 Penpal 细节,专注业务方法与类型定义。 + +## 安装与版本 +- 已在工作空间内作为包使用(`packages/iframe-bridge`)。 +- 依赖:`penpal@^6.2.1`。 + +## 目录结构 +``` +packages/iframe-bridge/ +├── package.json +├── README.md +└── src/ + ├── index.ts # 入口聚合与导出(不含业务逻辑) + ├── types.ts # 对外类型:HostApi、ChildApi + ├── path.ts # 路径转换与是否嵌入判断 + ├── client.ts # 子端到父端的连接与客户端方法 + ├── host.ts # 宿主侧创建与管理与子端的连接 + └── logger.ts # 统一日志工具 +``` + +## 核心概念 +- Host(宿主):包含 `iframe` 的父页面。 +- Child(子端):被嵌入在 `iframe` 中的子应用。子端暴露方法给宿主调用。 +- Penpal:在宿主与子端之间建立安全的双向 RPC(方法调用)连接。 + +## 快速上手 + +### 宿主侧(Host)示例:创建连接并缓存子端引用 +```ts +import { createPenpalHostBridge } from '@teres/iframe-bridge'; + +// iframeRef 指向你页面中的