Appel d'interface iframe inter-domaines jQuery (avec code)-js tutoriel-php.cn

Appel d'interface iframe inter-domaines jQuery (avec code)

php中世界最好的语言

Libérer： 2018-04-26 15:49:49

original

2181 Les gens l'ont consulté

Cette fois, je vous présente jQuery appel d'interface iframe inter-domaines (avec code). Quelles sont les précautions pour l'appel d'interface iframe inter-domaines jQuery Ce qui suit est un exemple pratique. cas, jetons un 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.stringify(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);
a.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>
      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 :

jQuery récupère l'IFrame et son objet fenêtre parent et utilise

Comment jQuery calcule la fenêtre iframe largeur et hauteur

Comment JQuery exploite-t-il la page associée d'iframe

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!