标签：
跨域的由来
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但是我们常常会遇到无法避免跨域的情况，如普通文章站点（article.xxx.com）需要评论，而评论站点却在cheat.xxx.com的情况。
跨域限制情况
在不同端口，不同协议，不同域名，域名和域名对应ip，主域相同，子域不同 都会产生同域限制，然而目前前端还无法解决，我们能解决的知识跨父域的情况（如上面说的article.xxx.com取得cheat.xxx.com）。
跨域的方法有很多，本文就谈谈使用window.name跨域
如开头提到的，我们需要在article.xxx.com和cheat.xxx.com跨域
实现原理：
window.name在同个页面间的iframe直接是共用的一个属性，以此为原理，我们就这么做
1、在article.xxx.com的页面中将要传输的数据存储在window.name里面，以及提供回调用的处理函数
2、新建iframe路径指向cheat.xxx.com域名的页面（crossproxy.html），然后在iframe获取window.name中的传输数据，提交给后端（同域传输了，呵呵）
3、iframe 将后端返回的数据存储在window.name里面， 再将此iframe的路径指向article.xxx.com域名的页面（redirect.html）
4、iframe执行父页面的回调函数
准备工作
在cheat.xxx.com建立crossproxy.html作为发数据所用
在article.xxx.com建立redirect.html作为返回回调函数使用
开始写代码了：
在article.xxx.com新建下面的方法
1 var crossDomainId = 0; //作为每次不同使用crosspost的标识 2 /*param包含 3 @param.action 请求action 4 @param.param 请求数据 5 @param.redirUrl iframe重定向的链接 6 */ 7 function crosspost (param,cb) { 8 var g = $(‘<iframe id=‘+iframe.crossDomainId+‘ ></iframe>‘).appendTo(‘body‘).attr(‘src‘, ‘http://cheat.xxx.com‘); 9 var _param = json.JSON.stringify($.extend(true, param, {id:‘cb‘+crossDomainId})); 10 11 g[0].contentWindow.name = _param; 12 window.redirectCallback[‘cb‘+crossDomainId] = function () { 13 cb&&cb(window.name[data]); 14 g.remove(); 15 } 16 crossDomainId++; 17 }
cheat.xxx.com/crossproxy.html代码
1 try{ 2 var data=JSON.parse(window.name),id=data.id,redirUrl=data.redirUrl; 3 $.post(data.action,data.param,‘json‘).done(function(data){ 4 window.name=JSON.stringify($.extend(true, {data:data}, {id:id})); 5 location.href=redirUrl; 6 }).fail(function(){ 7 window.name=data; 8 location.href=redirUrl 9 }); 10 }catch(e){}
article.xxx.com/redirect.html代码
1 var data=JSON.parse(window.name); 2 var id = data[id]; 3 try{ 4 top.redirectCallback(param.id); 5 }catch(e){ 6 7 }
优化：
以上代码在crossDomainId和url参数，可以使用location.search在父页面和iframe间传输，可降低window.name的复杂度
原页面使用defferd的写法，在使用的时候能够更加优雅
跨域的方法有很多，之前写过一篇jsonp跨域的文章http://www.cnblogs.com/peace1/p/4517279.html，写的比较简单
标签：
原文地址：http://www.cnblogs.com/peace1/p/5392819.html
