在找到跨域解决办法之前，我们要先弄清楚一些基本概念
- 什么是跨域？
- 什么是“同源策略”？
- 跨文档消息通信 & 跨域请求数据
- 主域相同而子域不同
- 不同域名的跨域访问
什么是跨域？
简单地理解就是因为同源策略的限制，a.com 域名下的js无法操作b.com或是xx.a.com域名下的对象。那么什么是“同源策略”？
什么是同源策略？
源是在网络上用来建立信任关系的地址子集。源由规则(scheme)、主机(host)、端口(port)组成。例如，由于规则不同（如https与http),所以 http://www.a.com与 https://www.a.com页面的源是不同的。
（有关这部分的内容，特别推荐Rain Man大哥写的这一篇，非常清晰易懂：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）
同源策略是指：出于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信受到了严格的限制。源不同，则检索或修改其他源的内容时，浏览器会抛出安全异常，并阻止相应的操作。在html5 新的api出现以前，只有同源的页面才可以相互访问对象。
其实跨域通信是分为两部分来讲的：
- 跨文档消息通信 （如读取不同源页面的DOM对象等）
- 跨域请求数据（跨域ajax请求, jsonp请求等）
注：实现跨域请求服务器数据 有很多种方式，如jsonp请求，flash等。本文主要讲“跨文档消息通信”
跨文档消息通信
我们经常在工作中碰到的有两种：
主域相同而子域不同
可以通过设置document.domain+iframe的办法来解决
不同域名的跨域访问
解决方案有很多，例如：
1. iframe+代理页+hash的方式
2. iframe + name
3. postMessage
下面我们用个例子来实现 “跨文档消息通信”
需求：a页面里有一个iframe（b页面)。当b页面加载完成后，同步一下iframe的高度。
1、“主域相同而子域不同” 的情况
下次上代码
2、“不同域名的跨域访问” 的情况
iframe+代理页+hash的方式：利用proxy.html代理页来实现. 这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值原理及流程。来张我画的草图：
a页面，位于sport.taobao.com域名下
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
<style>
body{background:#00ae8f;}
.iframeArea{margin-top:30px;}
</style>
</head>
<body>
A:运动页面 此页面访问时的url是这样的:
http://sport.taobao.com/market/sports/a.php?iframeUrl=http://wanke.etao.com/mobile/product-600000000007215.html
<div class="iframeArea">
<iframe id="J_sport_iframe" name="sport_iframe" src="" frameborder="0" style="display: block; margin: 0 auto; height: 1000px;" width="990" scrolling="no" >
</iframe>
</div>
<script>
(function(S){
KISSY.use('uri',function(S,Uri){
var url = new Uri(location.href).getQuery().get('iframeUrl');
if(url){
S.all('#J_sport_iframe').attr("src",url); //给iframe赋src的值
}else{
S.all('#J_sport_iframe').attr("src","http://wanke.etao.com/error.html");
}
});
})(KISSY);
</script>
</body>
</html>
b页面位于wanke.etao.com域名下
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
</head>
<body>
<div>
我是玩客页面:http://wanke.etao.com/mobile/product-600000000007215.html
</div>
<script>
/*
etao的B.html js 写在页面结束时
*/
(function (S) {
if (window != top) {
//在etao的页面B.html中创建iframe代理
S.one('body').append('<iframe id="iframeproxy" name="iframeproxy" src="" width="0" height="0" style="display:none;" ></iframe>'); function updateHeight() {
if (window !=top && S.one("#iframeproxy")) {
var ht = S.one("body").height() + 10, a = window.name, b;
b = "http://sport.taobao.com/market/sports/iframe-proxy2.php"
S.one("#iframeproxy")[0].src = b + "#" + ht;
}
}
updateHeight();
S.one(window).on('load', function () {
updateHeight();
});
}
})(KISSY);
</script>
</body>
</html>
proxy页面位于sport.taobao.com域名下，但是插入到b页面中
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
</head>
<body>
<script>
/*
taobao站点页面中的js http://sport.taobao.com/market/baobao/iframe-proxy2.php
*/
(function(S){
function pseth() {
var iObj = window.top.document.getElementById('J_sport_iframe');//A和iframe-proxy2同域，所以可以访问节点
iObjH = window.location.hash;//访问自己的location对象获取hash值
iObj.style.height = (+iObjH.split("#")[1]+5)+"px";//操作dom
}
pseth();
S.all(window).on("hashchange",function(){
pseth();
}); })(KISSY);
</script>
</body>
</html>
3. postMessage
我这里有篇文章专门写postMessage做跨域的。请看 http://www.cnblogs.com/summer_shao/p/3998695.html