jQuery实现跨域iframe接口方法调用

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);




a.html




代码如下:



<!doctype HTML>


<html>


  <head>


    <script” width=100% src=”jquery-1.8.3.min.js”></script>


    <script” width=100% src=”cross.js”></script>


    <script>


      function call_b(){


        var ifw = $(“#ifr”)[0].contentWindow;


        //调用iframe子页面的公开的test接口, 子页面域名为


        Cross.call(ifw,”: $(“#txt”).val()});


      }


    </script>


  </head>


  <body>


    <input id=”txt” type=”text”/>


    <button onclick=”call_b()”>call</button>


    <iframe id=”ifr”” width=100% src=”>


  </body>


</html>




b.html




代码如下:



<!doctype HTML>


<html>


  <head>


    <script” width=100% src=”jquery-1.8.3.min.js”></script>


    <script” width=100% src=”cross.js”></script>


    <script>


    //对外公开一个接口命名为test


    Cross.on(“test”, function(data){


      alert(data.t);


    });


    </script>


  </head>


  <body>


  </body>


</html>



SyntaxHighlighter.highlight();