标签：
实现跨域iframe接口方法调用 简单介绍:
页面a.html域名为www.a.com，嵌入页面http://www.b.com/b.html.
b.html要调用a.html中的js函数，由于两个页面不在一个域中，会提示没权限。
下面就介绍一下如何如何解决此问题，需要的朋友可以做一下参考。
一.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> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <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>
三.b.html代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <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>
原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0525/2453.html
最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17186
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4664118.html
