# NestedIframeMessenger 

**Repository Path**: Eazyzhou/nested-iframe-messenger

## Basic Information

- **Project Name**: NestedIframeMessenger 
- **Description**: 嵌套iframe架构之间互传消息插件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-15
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NestedIframeMessenger 

#### 介绍
嵌套iframe架构之间互传消息插件

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  npm install 去下载依赖包
2.  npm run build 执行打包程序
3.  输出umd和esm两种格式的包
4. 对于支持esm方式使用的情况下使用方式如下
    ```js
    <script type="module">
    import { NestedIframeMessenger } from './path/to/nested-iframe-messenger.esm.js';
    
    const messenger = new NestedIframeMessenger();
    messenger.sendUp('test', { data: 'hello' });
    </script>
   ```
5. 对于浏览器传统方式使用如下
    ```html
   <script src="path/to/nested-iframe-messenger.min.js"></script>
    <script>
      // 全局变量可用
      const messenger = new NestedIframeMessenger();
      
      // 或者使用自动创建的实例
      nestedIframeMessenger.on('message', function(payload) {
        console.log('Received message:', payload);
      });
    </script>
   ```
6. 内外层浏览器建立通信使用方式如下
    ### 1.在顶层页面（父页面）
    ```js
   // 初始化消息传递插件
    const messenger = new NestedIframeMessenger();
    
    // 注册消息处理函数
    messenger.on('messageFromInnerFrame', (payload, source) => {
    console.log('收到来自最内层iframe的消息:', payload);
    // 可以回复消息
     messenger.sendDown('responseFromTop', { acknowledged: true });
    });
    
    // 主动向下发送消息
    document.getElementById('sendButton').addEventListener('click', () => {
     messenger.sendDown('messageFromTop', { data: 'Hello from top window' });
    });
   ```
   ### 2.在中间层 iframe
    ```js
   // 初始化消息传递插件
    const messenger = new NestedIframeMessenger();
   ```
   ### 3.在最内层 iframe
    ```js
   // 初始化消息传递插件
    const messenger = new NestedIframeMessenger();
    
    // 发送消息到顶层
    document.getElementById('sendButton').addEventListener('click', () => {
    messenger.sendUp('messageFromInnerFrame', { data: 'Hello from inner frame' });
    });
    
    // 接收来自顶层的消息
    messenger.on('messageFromTop', (payload) => {
    console.log('收到来自顶层的消息:', payload);
    });
    
    messenger.on('responseFromTop', (payload) => {
    console.log('收到顶层的响应:', payload);
    });
   ```
   


   

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)