Implementing a cross-domain IFrame interface method invocation is a simple introduction:
Page a.html domain name is www.a.com, embedded page http://www.b.com/b.html.
B.html to invoke the JS function in a.html, because two pages are not in a domain, you will be prompted not to have permission.
The following describes how to solve this problem, the need for friends can do a reference.
A. Cross.js code is as follows:
(function(Global) {Global. Cross={signalhandler: {}, on:function(Signal, func) { This. signalhandler[signal] =func; }, call:function(win, domain, signal, data, Callbackfunc) {varNotice = {"Signal": Signal, "data": Data}; if(!!Callbackfunc) {notice["Callback"] = "Callback_" +NewDate (). GetTime (); Cross.on (notice["Callback"], Callbackfunc); } varNoticestr =json.stringify (notice); Win.postmessage (noticestr, domain); } }; $ (window). On ("Message",function(e) {varRealevent =e.originalevent, Data=Realevent.data, Swin=Realevent.source, Origin=realevent.origin, Protocol; Try{Protocol=json.parse (data); varresult = 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)) { DeleteCross.signalhandler[protocol.signal]; } } Catch(e) {console.log (e); Throw NewError ("Cross error.")); } });}) (window);
Two. The a.html code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><Scriptsrc= "Jquery-1.8.3.min.js"></Script><Scriptsrc= "Cross.js"></Script><Script>functionCall_b () {varIFW= $("#ifr")[0].contentwindow; //call the public test interface of the IFRAME sub-page, the sub-page domain name is http://localhost:8088Cross.call (IFW,"http://localhost:8088","Test", {t: $ ("#txt"). Val ()});}</Script></Head><Body><inputID= "txt"type= "text"/><Buttononclick= "Call_b ()">Pager</Button><iframeID= "IFR"src= "http://localhost:8088/b.html"></iframe></Body></HTML>
Three. The b.html code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><Scriptsrc= "Jquery-1.8.3.min.js"></Script><Scriptsrc= "Cross.js"></Script><Script>//to expose an interface named TestCross.on ("Test", function(data) {alert (DATA.T);});</Script></Head><Body></Body></HTML>
The original address is: http://www.51texiao.cn/jqueryjiaocheng/2015/0525/2453.html
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=17186
Implementing a cross-domain IFrame interface method call Brief introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
