前端开发之跨域数据调用

作为一个苦逼前端开发工程师，不得不面对各种cross，比如面对五花八门的浏览器我们必须cross browser，面对各种终端，我们必须cross device，在这么多年的前端开发经历中，在不同的域之间穿越中，遭受各种折磨，所以这次和大家分享的是cross domain。

这次分享的cross domain，是包括所有跨域调用，无论是跨域获取数据，还是跨域跨frame调用，所以会分为两部分，这次会先分享跨域获取数据，跨域获取数据大概有以下方式。

1.jsonp方式
这是最简单，也是最实用的跨域获取数据方式，原理是在浏览器端通过生成script标签，并通过js callback的形式实现跨域访问，比如一个jsonp接口是这样：
http://mail.163.com/someapp/jsonp?somequery=xxx&callback=fSomeMethod
然后服务器端会通过以下方式返回数据：
fSomeMethod({返回的json数据对象})
优点：实现简单，使用灵活，并且原生cross all browser
缺点：只能get方式获取数据，某些浏览器会显示加载中提示

2.表单post方式
这个方式会复杂一点点，原理是post表单到一个隐藏的iframe，然后iframe将数据post回来同域的一个url，这时候就可以直接调用同域的回调：
首先post表单到如：http://other.domain.com/someapp?somequery=xxx&callback=fSomeMethod&backurl=http://mail.163.com/proxy
这个接口返回的内容:
<form action="${backurl}" method="post">
<input type="hidden" name="data" value="返回的数据">
<input type="hidden" name="callback" value="${callback}">
</form>
<script>document.getElementsByTagName("FORM")[0].submit();</script>

然后post到http://mail.163.com/proxy后，返回：
<script>
parent.${param.callback}("${param.data}")
</script>
这样就完成整个跨域获取数据的过程
优点：支持post方式，并且原生cross all browser
缺点：实现有点复杂，并且流程有点曲折，需要两次请求，而且表单post方式会引起刷新提示的问题

3.服务器代理
服务器代理方式跨域调用也是使用的比较广泛的方式，原理就是在服务器端来获取跨域数据，然后在同域里ajax方式或者其他方式返回给浏览器。
优点：客户端实现简单，没有cross browser问题
缺点：需要在服务器端实现模拟请求获取数据

4.html5的XDomainRequest
终于在html5迎来了对跨域的ajax，泪牛满脸啊，这下完全可以通过浏览器的原生方式跨域ajax获取数据，这里有个对浏览器的各种跨域ajax的测试：
http://www.debugtheweb.com/test/teststreaming.aspx
优点：浏览器原生支持跨域方式ajax请求
缺点：只能在支持html5的高级浏览器中支持

5.flash request
这个是目前跨域请求最好的一个解决方案，建议在不能用jsonp的方式时候，都可以使用flash request方式，而且flash request可以配置一个安全策略，可以允许哪些域可以调用，然后被跨域的调用需要配置一个crossdomain.xml，允许可以被那个域的flash跨域调用，内容如下：
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.xxx.com" />
</cross-domain-policy>
这种方式的局限就是必须依赖flash，我们在邮箱曾经做过一个统计，99%的用户可以通过这种方式获取到数据，另外1%的用户可能是没有安装flash或者flash版本有问题。
优点：依赖flash下可以无视各个浏览器兼容问题
缺点：正所谓成也萧何败也萧何，缺点也是因为要依赖flash

以上每个方式都有优点和缺点，具体使用那种方式来跨域获取数据，需要具体使用时候来决定，没有那种方式是完美的。

在页面中当需要加载外域app的iframe时候，最容易出现跨frame的cross domain问题，比如刚才那前端开发工程师遇到的双滚动的问题，在页面中放入一个外域的iframe，当iframe的高度大于iframe的页面的body高度时，就会出现滚动，这时候加上本身页面已经有一条滚动，那就出现经典的双滚动问题，如果iframe里面又嵌套另一个外域iframe，那可能会出现三滚动，继续嵌套..继续滚动..继续套..继续滚...，之所以出现这个问题，是因为外域的iframe不能直接调用:

parent.document.getElementById("iframe_id").style.height =   document.body.offsetHeight + "px"

这里就需要跨iframe进行cross domain，有以下提到的两个方式。

以下的例子会以这几个页面作为例子：
页面a:http://www.a.com/a.htm
页面b:http://www.b.com/b.htm
a的内容：<iframe src="http://www.b.com/b.htm" id="ifrm_b"></iframe>

1.html5的postMessage方式
首先介绍一个浏览器原生的跨域调用方式，在支持html5的高级浏览器，支持这种方式：
oWin.postMessage(oMessage, sTargetDomain);
oWin为需要跨域调用的window对象
oMessage为传送的数据
sTargetDomain是跨域的frame的域
假如页面a跨域页面b，那么在页面a上调用以下进行跨域：

try{
 document.getElementById("ifrm_b").contentWindow.postMessage(JSON.stringify({value:"this   is cross call by PostMessage."}), "http://www.b.com");
}catch(e){
 alert("请使用以下或者更高版本浏览器：\nIE8+,   Firefox 3, Opera 9, Chrome 3和 Safari 4！");
}

然后在b，需要加一个window的message事件监听
fAddEvent(window, "message", function (o) {
 var oMessage = o.data;// data属性就是postMessage的oMessage参数
 alert(oMessage.value); // 这时候会显示：this is cross call by PostMessage.
});
这样就完成了跨frame的跨域通讯
优点：完美的跨frame跨域调用
缺点：只支持html5的浏览器

2.代理iframe方式
使用代理iframe的方式有两种，一种通过window.name方式跨域调用，一种是通过url参数的方式传递调用，不过两种方式的调用原理都是创建一个隐藏的iframe，iframe的url指向需要跨域的域名的一个代理页面，然后通过这个代理的iframe，和跨域的iframe通讯，因为这时代理的iframe和跨域的iframe完全同域，就可以畅通无阻进行。
在上面的例子加多一个代理页面c:
代理iframe c:http://www.b.com/c.htm
在页面a加入以下函数：

function fCrossByName(sDomain, oData) {
 var oIframe =   document.getElementById("ifrmCross");
 if(oIframe){
  oIframe.parentNode.removeChild(oIframe);
 }
 oIframe   = document.createElement("IFRAME");
 oIframe.style.display =   "none";
 oIframe.id = "ifrmCross";
 oIframe.name =   JSON.stringify(oData);
 document.body.appendChild(oIframe);
 oIframe.src   = "http://" + sDomain + "/c.htm";
}

然后在页面a就可以进行跨域：
fCrossByName("www.b.com", {
 value:'this is cross call by iframe',
 func : "fCrossByNameCall",  // 要跨域调用的函数
 win : "ifrm_b"
});
然后在代理iframe加入以下代码：
var oData = !window.name?null:(new Function('return '+window.name))();
if(oData.win && oData.func){
 var oResult = (oData.win == "top" ? top : parent[oData.win])[oData.func](oData);
}
这样就可以实现整个的跨域调用，通过url参数方式跨域调用，和这个类似，只是需要将数据放到代理iframe的url参数上，而不是name。
下面这个页面demo显示这三种方式的调用（因为没加JSON的转换js包，需要使用支持内置JSON对象的浏览器运行..）：
http://mimg.163.com/demo/crossdomain_test.htm
优点：没有浏览器兼容问题
缺点：因为要部署代理iframe的文件，所以比较麻烦，整个流程也比较复杂，如果要实现和html5的postMessage兼容的接口，需要做大量封装，就会更加造成更加复杂

总结：在邮箱实际使用过程中，当只是简单的跨域调用比如前面提到的解决双滚动问题，一般可以简单的使用第二种方式，但是如果需要复杂的双向互相调用，就需要支持html5的浏览器调用postMessage，不支持的需要第二种方法实现兼容。

http://ntesmailfetc.blog.163.com/blog/static/206287061201241011546581/