码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈postMessage多页面监听事件

时间:2016-02-25 22:41:21      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

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

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

    }

}

 

浅谈postMessage多页面监听事件

标签:

原文地址:http://www.cnblogs.com/qiuzhimutou/p/5218433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!