jQuery实现跨域iframe接口方法调用
cross.js
(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);
thrownewError("crosserror.");
}
});
})(window);
a.html
<!doctypeHTML>
<html>
<head>
<scriptsrc="jquery-1.8.3.min.js"></script>
<scriptsrc="cross.js"></script>
<script>
functioncall_b(){
varifw=$("#ifr")[0].contentWindow;
//调用iframe子页面的公开的test接口,子页面域名为http://localhost:8088
Cross.call(ifw,"http://localhost:8088","test",{t:$("#txt").val()});
}
</script>
</head>
<body>
<inputid="txt"type="text"/>
<buttononclick="call_b()">call</button>
<iframeid="ifr"src="http://localhost:8088/b.html"></iframe>
</body>
</html>
b.html
<!doctypeHTML>
<html>
<head>
<scriptsrc="jquery-1.8.3.min.js"></script>
<scriptsrc="cross.js"></script>
<script>
//对外公开一个接口命名为test
Cross.on("test",function(data){
alert(data.t);
});
</script>
</head>
<body>
</body>
</html>
以上就是本文所述的iframe跨域的解决方案了，希望大家能够喜欢。