Ausführliche Erläuterung der Schritte zum Ausführen eines domänenübergreifenden Iframe-Schnittstellenaufrufs mit jQuery-js-Tutorial-php.cn

Ausführliche Erläuterung der Schritte zum Ausführen eines domänenübergreifenden Iframe-Schnittstellenaufrufs mit jQuery

php中世界最好的语言

Freigeben： 2018-04-24 14:48:02

Original

1663 Leute haben es durchsucht

Dieses Mal bringen wir Ihnen jQuery zum Erstellen einer domänenübergreifenden Iframe--Schnittstelle mit einer detaillierten Erläuterung der Aufrufschritte und jQuery zum Erstellen eines domänenübergreifenden Iframe-Schnittstellenaufrufs Vorsichtsmaßnahmen Welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

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.
string
ify(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);

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte für Jquery zum Betreiben von js-Arrays und -Objekten

Das jQuery-Plug-in implementiert Interlaced Farbänderung von Tabellen und setzt diese mit Mausereignissen um. Interaktion

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum Ausführen eines domänenübergreifenden Iframe-Schnittstellenaufrufs mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!