今回は、jQueryクロスドメイン iframeインターフェースを作成するための呼び出し手順の詳細な説明と、jQuery がクロスドメイン iframe インターフェース呼び出しを行うための注意事項について説明します。実際のケースを見てみましょう。
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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
JQuery が JS 配列とオブジェクトを操作する手順の詳細な説明
jQuery プラグインは、テーブルのインターレース色の変更を実装し、マウス イベントと対話します
以上がjQuery を使用してクロスドメイン iframe インターフェイス呼び出しを行う手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。