suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Schritte zum Ausführen eines domänenübergreifenden Iframe-Schnittstellenaufrufs mit jQuery

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-24 14:48:021769Durchsuche

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie die adaptive Höhe und Breite von Iframes in JQueryNächster Artikel：So implementieren Sie die adaptive Höhe und Breite von Iframes in JQuery

In Verbindung stehende Artikel

Mehr sehen