Maison > Article > interface Web > 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);
<!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>
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 :
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!