首頁  >  文章  >  web前端  >  jQuery實作跨域iframe介面方法呼叫_jquery

jQuery實作跨域iframe介面方法呼叫_jquery

WBOY
WBOY原創
2016-05-16 16:09:321137瀏覽

cross.js

複製程式碼程式碼如下:

(函數(全域){
  全域.Cross = {
    訊號處理程序:{},
    上:函數(訊號,func){
      this.signalHandler[signal] = func;
    },
    呼叫:函數(win,域,訊號,數據,callbackfunc){
      var notification = {"signal": signal, "data": data};
      if(!!callbackfunc){
          notification["callback"] = "callback_" new Date().getTime();
          Cross.on(notice["callback"],callbackfunc);
      }
      var notificationStr = JSON.stringify(notice);
      win.postMessage(noticeStr, 域);
    }
  };
  $(window).on("訊息", function(e) {
    var realEvent = e.originalEvent,
        data = realEvent.data,
        swin = realEvent.source,
        origin = realEvent.origin,
        協定;
    嘗試{
        協定 = JSON.parse(data);
        var result = global.Cross.signalHandler[protocol.signal].call(null, protocol.data);
        if(!!協定["回呼"]){
          Cross.call(swin, origin, 協定["回呼"], {結果: 結果});
        }
        if(/^callback_/.test(protocol.signal)){
          刪除 Cross.signalHandler[protocol.signal];
        }
    } catch (e) {
      console.log(e);
      throw new Error("交叉錯誤。");
    }
  });
})(視窗);

a.html

複製程式碼程式碼如下:



 
   
   
   
      函數 call_b(){
        var ifw = $("#ifr")[0].contentWindow;
        //呼叫iframe子頁面的公開的測試接口,子頁網域為http://localhost:8088
        Cross.call(ifw,"http://localhost:8088","test",{t: $("#txt").val()});
      }
    腳本>
  頭>
 
   
   
    >
  身體>

b.html

複製程式碼程式碼如下:



 
   
   
    <script><br />     //對外公開一個介面命名為test<br />     Cross.on("test", function(data){<br />       alert(data.t);<br />     });<br />     </script>
 
 
 

以上就是本文所述的iframe跨域的解決方案了,希望大家能夠喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn