浅谈postMessage多页面监听事件

Posted 2020-06-16

最近做了一个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{

　　　　　　//不满足上面的条件又执行什么

　　　　}

}