通过postMessage在iframe和父窗口之间通信

在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging)

1
2
3
4
postMessage(data,origin)

data:要传的数据
origin: 字符串参数,指明目标窗口的源,协议+主机+端口号。如果为*则是所有的窗口,如果要指定和当前窗口同源的话设置为"/"。

子页面传给父页面

1
2
3
4
5
6
7
//子页面
window.parent.postMessage(data,'*');

//父页面
window.addEventListener('message',function(e){
console.log(e.data);
},false);

父页面传给子页面

1
2
3
4
5
6
7
8
//父页面
window.frames[0].postMessage(data,'http://test.com:port');//第二个参数为子页面地址

//子页面
window.addEventListener('message',function(e){
if(e.source != window.parent) return;
console.log(e.data);
},false);