javascript iframe跨域传递数据

父页面与iframe子页面都需要引入MessengerJS

每个Messenger对象都需要唯一的名字, 这样它们才可以知道跟谁通信.

// 父窗口中 - 初始化Messenger对象
var messenger = new Messenger('Parent');
 
// iframe中 - 初始化Messenger对象
var messenger = new Messenger('iframe1');
 
// 多个iframe, 使用不同的名字
var messenger = new Messenger('iframe2');

在发送消息前, 确保目标文档已经监听了消息事件.

// iframe中 - 监听消息
// 回调函数按照监听的顺序执行
messenger.listen(function(msg){
    console.log("收到消息: " + msg);
});

父窗口想给iframe发消息, 它怎么知道iframe的存在呢? 添加一个消息对象吧.

// 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字
messenger.addTarget(iframe1.contentWindow, 'iframe1');
 
// 父窗口中 - 可以添加多个消息对象
messenger.addTarget(iframe2.contentWindow, 'iframe2');

一切ready, 发消息吧~ 发送消息有两种方式. (以父窗口向iframe发消息为例)

// 父窗口中 - 向单个iframe发消息
messenger.targets['iframe1'].send(msg1);
messenger.targets['iframe2'].send(msg2);
 
// 父窗口中 - 向所有目标iframe广播消息
messenger.send(msg);

MessengerJS下载地址 https://github.com/biqing/MessengerJS