Explication détaillée des étapes pour effectuer un appel d'interface iframe inter-domaines avec jQuery-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-24 14:48:02

original

1734 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!