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 src="jquery-1.8.3.min.js"></script>

    <script src="cross.js"></script>

    <script>

      function call_b(){

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

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

        Cross.call(ifw,"http://localhost:8088","test",{t: $("#txt").val()});

      }

    </script>

  </head>

  <body>

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

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

    <iframe id="ifr" src="http://localhost:8088/b.html"></iframe>

  </body>

</html>

b.html

代码如下：

<!doctype HTML>

<html>

  <head>

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

    <script src="cross.js"></script>

    <script>

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

    Cross.on("test", function(data){

      alert(data.t);

    });

    </script>

  </head>

  <body>

  </body>

</html>

以上就是本文所述的iframe跨域的解决方案了，希望大家能够喜欢。

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

相关推荐