JavaScript实现的双向跨域插件分享
由于浏览器(同源策略)限制,JavaScript跨域的问题,一直是一个颇为棘手的问题。HTML5提供了跨文档消息传输的功能,在网页文档之间互相接收与发送信息。使用这个功能,不仅同源(域+端口号)的Web网页之间可以互相通信,还可以在两个不同域名之间实现跨域通信。
跨文档消息传输CrossDocumentMessaging提供了postMessage方法在不同网页文档之间互相传递数据,支持实时消息传递。现在很多浏览器都将支持这个功能,比如GoogleChrome2.0+、InternetExplorer8.0+、Firefox3.0+、Opera9.6+、Safari4.0+等
那么,IE6、IE7等不支持HTML5的浏览器怎么办?
可以使用window.name方法,因为window.name的修改不涉及跨域问题,虽然使用起来不是特别理想,但效果还可以接受。
但是,我们总不能每次涉及到跨域都去写一遍window.postMessage、window.addEventListener、window.name等等这些内容吧。
为此,我把这整个跨域过程抽象出来,封装成一个JavaScript插件,解决双向跨域问题,实现不同网页文档之间的实时通信,可以在两个不同域名之间实现跨域通信。
demo下载地址:http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar,版本v2
javascript跨域插件jcrossdomain.js
(function(win){
/**
*没有开花的树
*2013/12/0717:12
*/
var_jcd={
isInited:false,
elmt:false,
hash:'',
delims:',',
rand:function(){
return(newDate).getTime()
},
msg:function(){
alert('Warning:Youmustcallinitfunctionatfirst');
},
init:function(callback,elmt){
if(_jcd.isInited==true)
return;
_jcd.isInited=true;
_jcd.elmt=elmt;
if(win.postMessage){
//浏览器支持HTML5postMessage方法
if(win.addEventListener){
//支持火狐、谷歌等浏览器
win.addEventListener("message",function(ev){
callback.call(win,ev.data);
},false);
}elseif(win.attachEvent){
//支持IE浏览器
win.attachEvent("onmessage",function(ev){
callback.call(win,ev.data);
});
}
_jcd.msg=function(data){
_jcd.elmt.postMessage(data,'*');
}
}else{
//浏览器不支持HTML5postMessage方法,如IE6、7
setInterval(function(){
if(win.name!==_jcd.hash){
_jcd.hash=win.name;
callback.call(win,_jcd.hash.split(_jcd.delims)[1]);
}
},50);
_jcd.msg=function(data){
_jcd.elmt.name=_jcd.rand()+_jcd.delims+data;
}
}
}
};
varjcd={
initParent:function(callback,iframeId){ _jcd.init(callback,document.getElementById(iframeId).contentWindow); },
initChild:function(callback){ _jcd.init(callback,win.parent); },
sendMessage:function(data){ _jcd.msg(data); }
}; win.jCrossDomain=jcd; })(window);