# window iframe communication example

**Repository Path**: van404/window-iframe-communication-example

## Basic Information

- **Project Name**: window iframe communication example
- **Description**: 父窗口和iframe实时通信实例
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2016-07-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#window iframe communication example

##解决的问题
1. window父窗口和iframe窗口之间实时通信的问题，父窗口可能需要获取子窗口的状态
2. 为了达到更好或者更简单的交互控制

##具体思路
1.利用DOM的事件机制，借助于jquery绑定事件，触发事件
2.子窗口调用父窗口`send_message`方法，父窗口立即得到消息，进行消费

##代码例子
```
父窗口中：
<div id="notification_listener" style="display: none;"></div>
<script>
    function notify(event, data) {
        console.log(data);
    }
    $('#notification_listener').on('notify', function (event) {
        var message = $('#notification_listener').attr('data');
        message = JSON.parse(message);
        notify(event, message);
    });
    function send_message(data) {
        var message={};
        message.data=data;
        message=JSON.stringify(message);
        $('#notification_listener').attr('data',message);
        $('#notification_listener').trigger('notify');
    }
</script>
```
##调用方法
```
子窗口调用：
<script>
    console.log('start');
    var o = {
        a: 1,
        b: 2,
        c: {
            d: 4
        }
    };
    window.parent.send_message(o);
    console.log('end');
</script>
输出：
start
Object //这里收到了消息，实时触发
end
```

##总结
思路很简单，但值得借鉴