一. 什么是跨域

域名分为:一级域名、二级域名、三级域名。例如: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

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

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

JavaScript 跨域小总结的更多相关文章

  1. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  2. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

  3. thinkphp,javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

  4. Javascript跨域问题总结

    疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解

  5. 优雅绝妙的Javascript跨域问题解决方案

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...

  6. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  7. JavaScript跨域实现

    最近在做个上传文件的服务,其中包含一个上传的web页面.目的是想客户端页面嵌套这个web页面,然后直接将文件上传到服务器. 因为文件不同所以需要保存到的文件夹名称也不一样,所以客户端需要传递一个文件夹 ...

  8. JavaScript 跨域之 POST 实现。

    javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了. ...

  9. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

随机推荐

  1. reactive-turtle

    reactive-turtle 标签(空格分隔): Scala Github 偶然在Github上看到一个有意思的小项目,一个粑粑教11岁的儿子学习scala,因为学习语法等太枯燥了,所以写了一个海龟 ...

  2. Linux查看程序端口占用情况

    今天发现服务器上Tomcat 8080端口起不来,老提示端口已经被占用. 使用命令: ps -aux | grep tomcat 发现并没有8080端口的Tomcat进程. 使用命令:netstat ...

  3. dpkg: 处理归档 /var/cache/apt/archives/软件名 (--unpack)时出错:由于已经达到 MaxReports 限制,没有写入 apport 报告。

    一.环境介绍: OS:ubuntu16.04 64bit 二.错误如下: 正准备解包 .../libqt4-script_4%3a4.8.7+dfsg-5ubuntu2_i386.deb  ...正在 ...

  4. hdu 4920 Matrix multiplication bitset优化常数

    Matrix multiplication Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/ ...

  5. Android app开发知识小结

    Android知识小结 这是一个知识的总结,所以没有详解的讲解. 一.分辨率Android中dp长度.sp字体使用.px像素.in英寸.pt英寸1/72.mm毫米 了解dp首先要知道density,d ...

  6. Java动态代理与Cglib库

    JDK动态代理 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在 ...

  7. c++程序判断系统是Linux还是Windows

    用C++来实现,本来想了很多,后来越写越烂,而且结果总是不尽人意,干脆这样子好了: int main() { int judge = system("cls"); ) cout & ...

  8. jq异步上传文件(转载)

    最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾. 1 ,引入依赖脚本 <script type="text/JavaScript" src="/j ...

  9. 理解HTTP幂等性

    转载: 理解HTTP幂等性 基于HTTP协议的Web API是时下最为流行的一种分布式服务提供方式.无论是在大型互联网应用还是企业级架构中,我们都见到了越来越多的SOA或RESTful的Web API ...

  10. Web之路笔记之一

    简单说一句,现在开始准备面试前端的知识,每天完成相关的任务,记录一些点. 2014秋季学期Web2.0课程习题 <Lab1 - About Me Page> 目标是自己动手写一个粗略的包含 ...