postMessage

最近公司项目遇到一个问题:项目中使用的百度地图插件不支持https协议,所以想到的办法是当请求是Https协议的时候,弹出一个新的浏览器tab(子页面),需要的数据由主页面传到子页面进行展示,但是其中还有如下问题

0 判断当前请求是https协议

window.location.protocol == "https:"(冒号不要忘l)

1 IE下不支持postMessage 所以首先得过滤IE

   

if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)) {


             alert("IE暂不支持");


    } 

 

2 主页面打开新的页面

      var myPopup = window.open(url); //myPopup 表示子页面

3.主页面监听子页面信息

       //监听消息
  function listener() {

    //监听新窗口的关闭事件
    var loop = setInterval(function () {

      if (myPopup.closed) { //如果子窗口关闭

        clearInterval(loop);

        loop = null;

        //解绑定事件 如果没有这个动作就可以出现如下情况:关闭子页面后重新打开一个 会重复绑定监听事件
        window.removeEventListener('message', handler);


      }
    }, 1000);


    //如果没有关闭 则和新窗口进行通信
    if (loop) {

      window.addEventListener('message', handler, false);

    }


  }

  //处理接收到的消息
  function handler(e) {


    if (e.data.type == 'giveMeInfo') {

      postMessage.type = "info";

      postMessage.geoData = ruleData[2].payloadGeoFenceRules;

      postMessage.account = window.adminInfo.account;


      myPopup.postMessage(postMessage, '*');


    } else if (e.data.type == 'giveYouInfo') {


      console.info('地理围栏:     ' + e.data.data);


      //存储地理围栏数据
      ruleData[2].payloadGeoFenceRules = e.data.data;


      postMessage.type = "confirm";

      postMessage.data = "编辑成功";


      myPopup.postMessage(postMessage, '*');


    }


  }

4  

//获得协议和主机

 _protocolAndPort: function () {
    var ref;
    ref = that.location.protocol + '//' + that.location.host + '/';
    return ref;
  },