Explication détaillée des étapes pour effectuer un appel d'interface iframe inter-domaines avec jQuery

Cette fois, nous vous proposons jQuery pour créer une interface iframe inter-domaine explication détaillée des étapes d'appel, et jQuery pour effectuer un appel d'interface iframe inter-domaine Précautions Lesquelles, les suivantes sont des cas pratiques, jetons-y un coup d'oeil.

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

nbsp;HTML>

  
    <script></script>
    <script></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>
  
  
    <input>
    <button onclick="call_b()">call</button>
    <iframe></iframe>
  

nbsp;HTML>

  
    <script></script>
    <script></script>
    <script>
    //对外公开一个接口命名为test
    Cross.on("test", function(data){
      alert(data.t);
    });
    </script>
  
  
  

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres informations connexes. articles sur le site php chinois !

Lecture recommandée :

Explication détaillée des étapes permettant à Jquery de faire fonctionner les tableaux et les objets js

Le plug-in jQuery implémente l'entrelacement changement de couleur des tables et l'implémente avec les événements de souris Interaction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!