标签:
最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage
如下介绍:
最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下面子级页面的动态,代码:
window.parent.addEventListener(‘message‘,function(e){
if(e.source != window.parent) return;
var names = localStorage.getItem("toName");
window.postMessage(names,‘*‘); //*代表所有页面
},false)
之后在在开始的页面写入传入message指令,代码:
var objString = JSON.stringify({from:"toOne",value:data.name}); //这里就是多页面监听的重点,每次页面向父级页面传入message的时候都是用json格式传入,之后就能通过判断from的来源来判断是点击了那幅图要实现什么效果
var clickName = localStorage.setItem("toName",dataName); //本地保存一个点击对象的名称
window.parent.postMessage(data.name,‘*‘); //将数据的名称上传到父级
最后在不同页面的调用,代码:
window.parent.addEventListener(‘message‘,function(e){
var Title,from;
try{
var obj = JSON.parse(e.data); //转换json字符
Title = obj.value;
from = obj.from;
}catch(er){
Title = e.data;
}
if(from=="toOne"){
//用if判断是哪个页面传入的变量,对应的执行什么代码
}else{
//不满足上面的条件又执行什么
}
}
标签:
原文地址:http://www.cnblogs.com/qiuzhimutou/p/5218433.html