Messenger

跨域 Iframe 通信解决方案,兼容主流和 IE 系列浏览器。

父页面

var Messenger = FNX.include('messenger/messenger');

// 初始化父页面的信使
var messenger = new Messenger('parent', 'MessengerProject');

// 绑定子页面 iframe
messenger.addTarget(iframe1.contentWindow, 'iframe1');
messenger.addTarget(iframe2.contentWindow, 'iframe2');

// 给子页面发消息
messenger.targets['iframe1'].send('发给子页面1的消息');

// 或者给所有子页面发消息
messenger.send('发给所有子页面的消息');

子页面

var Messenger = FNX.include('messenger/messenger');

// 初始化子页面的信使
// 注意,第二个参数 `MessengerProject` 必须和父页面的信使保持一致,
var messenger = new Messenger('iframe1', 'MessengerProject');

// 给父页面发消息
messenger.targets['parent'].send('发给父页面的消息');

示例

我是父页面

来自子页面的消息:
<p>
  我是子页面
  <script>document.write('(' + location.protocol + '//' + location.host + ')');</script>
</p>

<p>
  <input id="message">
  <input type="button" id="send" value="发送给父页面">
</p>
<pre id="output">来自父页面的消息:</pre>

<script>
var Messenger = FNX.include('messenger/messenger');

var messenger = new Messenger('iframe1', 'demo');
messenger.addTarget(window.parent, 'parent');

// 通过点击按钮发送消息
var send = $('#send');
var message = $('#message');
var output = $('#output');
send.click(function() {
    messenger.targets['parent'].send(message.val());
    //messenger.send();  // 这样会发给所有 targets
    message.val('');
});

// 监听消息
messenger.listen(function(msg) {
    console.log('收到', msg);
    output.html(output.html() + ' ' + msg);
});

</script>

<style>body{background:#DAF5FF;padding:15px;}</style>

父页面这么写

var Messenger = FNX.include('messenger/messenger');

var messenger = new Messenger('parent', 'demo');
messenger.addTarget($('iframe')[0].contentWindow, 'iframe1');

// 通过点击按钮发送消息
var send = $('#send');
var message = $('#message');
var output = $('#output');
send.click(function() {
    console.log('发出', message.val());
    messenger.targets['iframe1'].send(message.val());
    message.val('');
});

// 监听消息
messenger.listen(function(msg) {
    output.html(output.html() + ' ' + msg);
});