JavaScript 跨域小总结

2024-04-27 14:17:25

字体：大中小

来源：转载

供稿：网友

javaScript 跨域小总结

一. 什么是跨域

域名分为：一级域名、二级域名、三级域名。例如：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.htmldocument.domain="a.com";varifr=document.createElement("iframe");ifr.src="http://script.a.com";ifr.style.display="none";document.appendChild(ifr);ifr.onload=function(){vardoc=ifr.contentDocument||ifr.contentWindow.document;//在这里操作b.htmlalert(doc.getElementsByTagName("h1").childNodes[0].nodeValue);}//script.a.com上的b.htmldocument.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中的代码<iframeid="ifr"src="b.com/index.html"></iframe><scripttype="text/javascript">window.onload=function(){varifr=document.getElementById("ifr");vartargetOrigin="http://b.com";//若写成"http://b.com/c/PRoxy.html"，效果一样；若写成"http://c.com"就不会执行postMessage方法了ifr.contentWindow.postMessage("Iwasthere",targetOrigin);};</script>//b.com/index.html中的代码<scripttype="text/javascript">window.addEventListener('message',function(){//通过origin属性判断消息来源if(event.orgin=="http://a.com"){alert(event.data);//弹出"Iwasthere"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

http://www.nowamagic.net/librarys/veda/detail/224/

http://zha-zi.iteye.com/blog/1975116

上一篇：JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

下一篇：菜单悬浮