码迷,mamicode.com
首页 > 其他好文 > 详细

前端开发各种cross之cross domain

时间:2014-05-10 01:47:55      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:style   blog   tar   c   http   get   

作为一个苦逼前端开发工程师,不得不面对各种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

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

二:

苦逼的前端开发工程师,刚才解决了一个cross domain的问题,还没有来得及沉浸在其中喜悦之际,又迎来了另外一个cross domain的问题:邮箱出现双滚动啦。

在页面中当需要加载外域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/

前端开发各种cross之cross domain,布布扣,bubuko.com

前端开发各种cross之cross domain

标签:style   blog   tar   c   http   get   

原文地址:http://www.cnblogs.com/fxair/p/3708125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!