html页面消息传递,html5 postMessage跨域通讯 1.解决页面与嵌套的iframe消息传递

postMessage(data,origin)html

一、父页面获取iframe的数据

第一步：iframe向父页面发送数据web

var idata="abc";

// *表明向全部父级发送，或者能够指定地址

window.parent.postMessage(idata,"*");

第二步：父页面接收iframe的数据svg

window.addEventListener('message',function(rs){

console.log(rs.data);

})

二、iframe获取父页面数据

第一步：父页面向iframe发送数据post

//获取iframe的id

var ifr = document.getElementById('editmap');

//iframe的路径

var url=document.location.origin+'/admin/tpl/maptxt.html';

//要发送的数据

var fdata=[$scope.tablesData[0].long,$scope.tablesData[0].lat];

//页面加载完后，执行发送方法

setTimeout(function(){

ifr.contentWindow.postMessage(fdata,url);

},2000);

第二步：iframe接收数据url

window.addEventListener('message',function(rs){

var pointdata=rs.data;

console.log(pointdata);

})