ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery クロスドメイン iframe インターフェイス呼び出し (コード付き)
今回は、jQueryクロスドメイン iframe インターフェース呼び出し (コード付き) について説明します。iframe インターフェースに対する jQuery クロスドメイン呼び出しの 注意事項 は何ですか?実際のケースを見てみましょう。
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
<!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 は IFrame とその親ウィンドウ オブジェクトを取得し、使用します
jQuery は iframe ウィンドウの幅と高さをどのように計算しますか
以上がjQuery クロスドメイン iframe インターフェイス呼び出し (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。