- 浏览: 184709 次
- 性别:
- 来自: 杭州
最新评论
-
wahahachuang5:
web实时推送技术使用越来越广泛,但是自己开发又太麻烦了,我觉 ...
转发:websocket 通信协议介绍 -
爱很执着:
好
Java多线程同步机制(synchronized) -
我在路上看风景:
不错啊,看完了,疑惑不存在了。 新浪微博@最美最好的你
Java多线程同步机制(synchronized) -
hbiao68:
写得很好,受教了
Java Resource路径总结二 -
JamesLiuX:
有Freelancer的老鸟吗,求组队!
Freelancer
转自:http://www.cnblogs.com/rainman/archive/2011/02/20.html
什么是跨域
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:
首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:
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 |
不同域名 | 不允许 |
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。
接下来简单地总结一下在“前台”一般处理跨域的办法,后台proxy这种方案牵涉到后台配置,这里就不阐述了,有兴趣的可以看看yahoo的这篇文章:《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls 》
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文件之间就可以 “交互”了。当然这种办法只能解决主域相同而二级域名不同的情况,如果你异想天开的把script.a.com的domian设为alibaba.com 那显然是会报错地!代码如下:
www.a.com上的a.html
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };
script.a.com上的b.html
document.domain = 'a.com';
这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。
备注:某一页面的domain默认等于window.location.hostname。主域名是不带www的域名,例如a.com,主域名前面带前缀的通常都为二级域名或多级域名,例如www.a.com其实是二级域名。 domain只能设置为主域名,不可以在b.a.com中将domain设置为c.a.com。
2、动态创建script
虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等) 。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility
这里判断script节点加载完毕还是蛮有意思的:ie只能通过script的readystatechange属性,其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。
js.onload = js.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { // callback在此处执行 js.onload = js.onreadystatechange = null; } };
3、利用iframe和location.hash
这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url: http://a.com#helloword中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新,所以可 以利用hash值来进行数据传递,当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的 cs2.html传递信息,cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的 cs2.html页面,这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe;Firefox可以修改 )。同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一点有变化则获取获取hash值。代码如下:
先是a.com下的文件cs1.html文件:
function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo'; document.body.appendChild(ifr); } function checkHash() { try { var data = location.hash ? location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is '+data); } } catch(e) {}; } setInterval(checkHash, 2000);
cnblogs.com域名下的cs2.html:
//模拟一个简单的参数处理操作
switch(location.hash){
case '#paramdo':
callBack();
break;
case '#paramset':
//do something……
break;
}
function callBack(){
try {
parent.location.hash = 'somedata';
} catch (e) {
// ie、chrome的安全机制无法修改parent.location.hash,
// 所以要利用一个中间的cnblogs域下的代理iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意该文件在"a.com"域下
document.body.appendChild(ifrproxy);
}
}
a.com下的域名cs3.html
//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1);
当然这样做也存在很多缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等……
4、window.name实现的跨域数据传输
文章较长列在此处不便于阅读,详细请看 window.name实现的跨域数据传输 。
5、使用HTML5 postMessage
HTML5 中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging 。 下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能,用postMessage支持基于web的实时消息传递。
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(event){ // 通过origin属性判断消息来源地址 if (event.origin == 'http://a.com') { alert(event.data); // 弹出"I was there!" alert(event.source); // 对a.com、index.html中window对象的引用 // 但由于同源策略,这里event.source不可以访问window对象 } }, false); </script>
参考文章:《精通HTML5编程》第五章——跨文档消息机制 、https://developer.mozilla.org/en/dom/window.postmessage
6、利用flash
这是从YUI3的IO组件中看到的办法,具体可见http://developer.yahoo.com/yui/3/io/
。
可以看在Adobe Developer Connection看到更多的跨域代理文件规范:ross-Domain Policy File Specifications
、HTTP Headers Blacklist
。
经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询。
示例
URL:http://b.a.com:88/index.php?name=kang&when=2011#first
protocol: | 协议 | "http:" |
hostname: | 服务器的名字 | "b.a.com" |
port: | 端口 | "88" |
pathname: | URL中主机名后的部分 | "/index.php" |
search: | "?"后的部分,又称为查询字符串 | "?name=kang&when=2011" |
hash: | 返回"#"之后的内容 | "#first" |
host: | 等于hostname + port | "b.a.com:88" |
href: | 当前页面的完整URL | "http://www.a.com:88/index.php?name=kang&when=2011#first" |
window.location和document.location互相等价的,可以交换使用
location的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL, 而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载
注意
URL:http://b.a.com:88/index.php?name=kang&how=#when=2011#first
search: | "?name=kang&how=" | 第一个"?"之后 |
hash: | "#when=2011#first" | 第一个"#"之后的内容 |
方法
这种方式会讲新地址放到浏览器历史栈中,意味着转到新页面后“后退按钮”仍可以回到该页面。
发表评论
-
程序员到项目经理:从内而外的提升
2012-11-20 21:57 1046很不错的文章,看了有感触: http://www.manag ... -
25个免费的小清新风格的XHTML/CSS网站模板推荐
2013-08-17 10:54 868非常喜欢的风格: http://www.iteye.com ... -
如何带好新员工
2012-02-07 09:17 1159http://www.iteye.com/topic/1120 ... -
一线架构师:一
2012-01-30 10:42 933软件构架脑图: -
Freelancer
2012-01-10 13:35 1113自由骑士 http://www.52freelancer.c ... -
安装 Tokyo Cabinet 和 Tokyo Tyrant
2011-12-29 09:00 1189原文出处:http://blog.chenlb.com/200 ... -
大型电子商务网站架构之-前端优化
2011-12-21 14:23 1065http://liriguang.iteye.com/blog ... -
网站架构
2011-12-21 14:06 889业务分离,域名分离 一个业务对应一个系统、一 ... -
ext开发的统一办公平台
2011-12-05 13:31 821觉的不错,标记下 http://blog.csdn.net/ ... -
浅谈PM(好文推荐)
2011-11-10 14:27 522浅谈PM(不错的文章) http://www.itpub.n ... -
评估产品机会
2011-10-31 21:45 723评估产品机会 1. 产品要解决什么问题?(产品价值) ... -
WINDOWS下使用7z将文件打包压缩成tar.gz格式教程
2011-08-02 15:33 1732http://www.fuyahui.com/post/hel ... -
firfox关闭的时候不提示是否保存已打开的标签页解决方法
2011-07-07 16:50 835在地址栏中打开 about:config 在过滤器中输入 b ... -
Java集群之session共享解决方案
2011-06-29 23:53 1778转:http://blog.csdn.net/crskyp/a ... -
Clustering经典范文学习
2011-06-29 23:20 1144转:http://blog.csdn.net/calvinxi ... -
java常用网站收集
2011-04-18 14:04 800自己常去iteye 和 csdn ,一些活跃的java网站偶尔 ... -
如何将.class文件打成jar包
2011-04-01 23:31 1102转载自:http://blog.csdn.net/tomorr ... -
eclipse快捷键
2011-03-10 10:52 774首先键盘而非鼠标,高效程序员入门必备 Ctrl+1 快 ... -
Lucene学习笔记
2010-05-26 09:42 1104最近项目要用到Lucene,网上搜索了一些基础作为学习记录。 ...
相关推荐
本篇文章主要介绍了JavaScript跨域,详细的总结了什么是跨域,并介绍了几种解决办法,感兴趣的小伙伴们可以参考一下。
主要介绍了javascript 跨域问题以及解决办法的相关资料,需要的朋友可以参考下
Javascript跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
ajax跨域问题的解决办法
NULL 博文链接:https://javasam.iteye.com/blog/1849358
JavaScript 父子页面跨域通信的方法
在浏览器查看一个pdf文件时常常不知道怎么显示,这个资源可以很好的帮到你,而且还附有跨域的解决办法。
实现javascript跨域,可以在不同域名双向通信,内含demo,支持IE6+、火狐,谷歌等浏览器 配套文章:http://blog.csdn.net/mycwq/article/details/16344171
NULL 博文链接:https://sun123start.iteye.com/blog/2150778
主要介绍了javascript跨域原因以及解决方案分享,十分的细致全面,有需要的小伙伴可以参考下。
JS跨域访问解决方案总结.。总结了记住JS跨域访问解决方案。
arcgis api for javascript跨域处理方案
js跨域访问解决方案总结,不同域名下cookie相互操作
本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较
NULL 博文链接:https://swordshadow.iteye.com/blog/2082999
解决tomcat在IP 和端口不同时引起的跨域问题,解决方案,通过编写crossDomain.xml文件