一. 什么是跨域
域名分为:一级域名、二级域名、三级域名。例如:baidu.com(一级域名) 、www.baidu.com(二级域名)tieba.baidu.com(二级域名)、bbs.youa.baidu.com (三级域名)。
简易记法:在域名中包含两个点的为二级域名,只包含一个点的为一级域名。
跨域:由于JavaScript同源策略的限制,a.com下的js无法操作b.com或是c.a.com下的域名对象。详情如下表:
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
注意两点:
1. 如果是端口和协议不同造成的跨域问题,“前台”是无能为力的;
2. 在跨域问题上,域仅仅是通过“URL的首部”来识别,而不会去尝试判断两个域是否在同一个IP上。
二. 前台处理跨域的方法
1、document.domain+iframe的设置
解决主域相同而子域不同的情况,设置document.domain的方法来解决。具体的做法是:在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain="a.com",然后在a.html中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以交互了。这种办法只能解决主域相同而二级域名不同的情况,如果把document.domain设置为baidu.com,显然会报错,代码如下:
//www.a.com上的a.html
document.domain = "a.com";
var ifr = document.createElement("iframe");
ifr.src = "http://script.a.com";
ifr.style.display = "none";
document.appendChild(ifr);
ifr.onload = function() {
var doc = ifr.contentDocument || ifr.contentWindow.document;
//在这里操作b.html
alert(doc.getElementsByTagName("h1").childNodes[0].nodeValue);
} //script.a.com上的b.html
document.domain = "a.com";
2、HTML5 postMessage方法
HTML5中最酷的新功能之一就是跨文档消息传输(Cross Document Messaging)。下一代浏览器都支持这个功能:Chrome2.0+、Internet Explorer8.0+、Firefox3.0+、Opera9.6+和Safari4.0+。Facebook已经使用了这个功能,用postMessage支持基于Web的实时消息传递。
otherWindow.postMessage(message,targetOrigin);
otherWindow:对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.open的返回值;通过name或下标从window.frames取到的值。
message:所要发送的数据,string类型。
targetOrigin:用于限制otherWindow,“*”表示不作限制。
代码如下:
//a.com/index.html中的代码
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById("ifr");
var targetOrigin = "http://b.com"; //若写成"http://b.com/c/proxy.html",效果一样;若写成"http://c.com"就不会执行postMessage方法了
ifr.contentWindow.postMessage("I was there",targetOrigin);
};
</script> //b.com/index.html中的代码
<script type="text/javascript">
window.addEventListener('message',function() {
//通过origin属性判断消息来源
if(event.orgin == "http://a.com") {
alert(event.data); //弹出"I was there"
alert(event.source); //对a.com、index.html中window对象的引用,但由于同源策略的限制,这里的event.source不可以访问window对象
}
},false);
</script>
3、JSONP处理跨域
简述原理与过程:
首先在客户端注册一个callback,然后把callback的名字传给服务器。此时服务器先生成json数据。然后以JavaScript语法的方式,生成一个function,function的名字就是传递上来的参数jsonp。最后将json数据直接以入参的方式,放置到function中,这样就生成了一段js语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到客户端预先定义好的callback函数里。
引用:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html