混合开发----论集成效率的提升空间

混合开发—-论集成效率的提升空间

最近交行要集成我们的IM，突然感觉我们自己的IM-SDK针对交行的业务还是比较鸡肋的。于是乎我们自己封装了腾讯的IM群组sdk，功能是：实现直播弹幕功能，同时弹幕与评论还要同步，技术上和实现上还是比较ok的，但是集成上就进入荆棘地。
鉴于交行的框架，我们采取了混合开发的模式进行集成。

基本架构如下：
1. 评论部分：使用H5嵌套iFrame模块。
评论是交行业务板块H5的一部分，属于我们开发，以iframe方式解耦。
2. 弹幕属于Native模块。
弹幕是我们native开发完毕，主要是提供UI以及IM-SDK的通道。

---

期间用到了跨域访问
父：www.bancom.xxx
子：www.v114.xxx(iframe嵌入)

1. 父调子：
   父html与子iframe.html均引用辅助工具js：cross.js

 (function(global){
   global.Cross = {
     signalHandler: {},
     on: function(signal, func){
       this.signalHandler[signal] = func;
     },
     call: function(win, domain, signal, data, callbackfunc){
       var notice = {"signal": signal, "data": data};
       if(!!callbackfunc){ notice["callback"] = "callback_" + new Date().getTime(); Cross.on(notice["callback"], callbackfunc); }
       var noticeStr = JSON.stringify(notice);
       win.postMessage(noticeStr, domain);
     }
   };
   $(window).on("message", function(e) {
     var realEvent = e.originalEvent,
         data = realEvent.data,
         swin = realEvent.source,
         origin = realEvent.origin,
         protocol;
     try { protocol = JSON.parse(data); var result = global.Cross.signalHandler[protocol.signal].call(null, protocol.data); if(!!protocol["callback"]){ Cross.call(swin, origin, protocol["callback"], {result: result}); } if(/^callback_/.test(protocol.signal)){ delete Cross.signalHandler[protocol.signal]; } } catch (e) { console.log(e); throw new Error("cross error."); }
   });
 })(window);

在父html中引用

 <script src="js/jquery-2.1.4.min.js"></script>
 <script src="js/cross.js"></script>

调用代码：

 $(document).ready(function(){

       //$("#frame1")[0].contentWindow.onJsFrame();
        var ifw = $("#frame1")[0].contentWindow;

        Cross.call(ifw,"http://livet.v114.com","test",{t: "test1"});//http://livet.v114.com是子iframe在的域名
        Cross.call(ifw,"http://livet.v114.com","test2",{t: "test2"});
        });

子iframe.html中：

 <script src="jquery-2.1.4.min.js"></script>
     <script src="cross.js"></script>
     <script>
     Cross.on("test", function(data){
       alert(data.t);
     });
     Cross.on("test2", function(data){
       alert("second native data");
          window.parent.postMessage("222","*");//发送给父html信息  
     });
     </script>

1. 子调用父：
   子iframe.html中发消息给父
   window.parent.postMessage(“222”,”*”);//发送给父html信息
   父html监听：

$(function(){  


      //接收 子页面iframe的通信信息  
      window.addEventListener('message',function(e){  
          alert("get iframe data")  
           window.channelsoft.toast("你好data来自iframe");//native的方法  弹出提示
      },false);  


});