- 浏览: 592872 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (199)
- 纯java (22)
- 中间件 (1)
- java线程 (1)
- webwork (10)
- HTML/CSS (11)
- struts2 (10)
- mysql (14)
- Linux (8)
- 字符编码和转换 (1)
- WebService (1)
- web (21)
- javascript (33)
- ajax (5)
- 随便写写 (3)
- svn (0)
- eclipse使用技巧 (10)
- Ant (1)
- 互联网发展方向 (1)
- Jquery (12)
- 视频 (2)
- MD5 (1)
- 项目经验总结 (1)
- Oracle (2)
- Netbeans (1)
- Apache/Tomcat (4)
- springside (1)
- hibernate (6)
- SpringSecurity (0)
- java与文件 (1)
- CKEditor (4)
- JSON (3)
- 笔试题 (0)
- 应用部署 (1)
- 杂七杂八 (1)
- android (1)
- jQuery UI (1)
- XML相关技术 (1)
- HTML5 (1)
- CSS3 (0)
- 正则表达式 (1)
- http协议 (3)
- 算法 (5)
- 互联网知识 (1)
最新评论
-
hp321:
我现在遇到一个开发自定义按钮的问题,想请教下你:问题如下:举例 ...
Ckeditor 如何在源码模式下添加可以显现的按钮 -
make1828:
javascript跨域解决方案(一) -
huxianwen:
问题是, ckeditor编辑器在源码模式并不能插入任何代码呀 ...
Ckeditor 如何在源码模式下添加可以显现的按钮 -
nidonglin1986:
虽然解决了问题,但是原因说的不是很明白啊。中文跟HTML标志 ...
struts2的标签在JS中的使用 中文乱码 -
ldw1986hf123:
[*]
JVM工作原理
3.4、iframe+location.hash
这种方法比上面两种稍微繁琐一点,原理如下:
www.a.com下的a.html想和www.b.com下的b.html通信(在a.html中动态创建一个b.html的iframe来发送请求);
但是由于“同源策略”的限制他们无法进行交流(b.html无法返回数据),于是就找个中间人:www.a.com下的c.html(注意是www.a.com下的);
b.html将数据传给c.html(b.html中创建c.html的iframe),由于c.html和a.html同源,于是可通过c.html将返回的数据传回给a.html,从而达到跨域的效果。
三个页面之间传递参数用的是location.hash(也就是www.a.html#sayHello后面的'#sayHello'),改变hash并不会导致页面刷新(这点很重要)。
具体代码如下:
www.a.com/a.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//通过动态创建iframe的hash发送请求 function sendRequest(){
var ifr = document.createElement( 'iframe' );
ifr.style.display = 'none' ;
//跨域发送请求给b.html, 参数是sayHello
document.body.appendChild(ifr);
} //获取返回值的方法 function checkHash() {
var data = location.hash ?
location.hash.substring(1) : '' ;
if (data) {
//处理返回值
alert(data);
location.hash= '' ;
}
} //定时检查自己的hash值 setInterval(checkHash, 2000); window.onload = sendRequest; |
www.b.com/b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function checkHash(){
var data = '' ;
//模拟一个简单的参数处理操作
switch (location.hash){
case '#sayHello' : data = 'HelloWorld' ; break ;
case '#sayHi' : data = 'HiWorld' ; break ;
default : break ;
}
data && callBack( '#' +data);
} function callBack(hash){
// ie、chrome的安全机制无法修改parent.location.hash,
// 所以要利用一个中间的www.a.com域下的代理iframe
var proxy = document.createElement( 'iframe' );
proxy.style.display = 'none' ;
// 注意该文件在"www.a.com"域下
document.body.appendChild(proxy);
} window.onload = checkHash; |
www.a.com/c.html
可能有人会有疑问,既然c.html已经获取了a.html的window对象了,为何不直接修改它的dom或者传递参数给某个变量呢?
原因是在c.html中修改 a.html的dom或者变量会导致页面的刷新,a.html会重新访问一次b.html,b.html又会访问c.html,造成死循环……囧呀~
所以只能通过location.hash了。这样做也有些不好的地方,诸如数据容量是有限的(受url长度的限制),而且数据暴露在url中(用户可以随意修改)……
3.5、postMessage(html5)
html5中有个很酷的功能,就是跨文档消息传输(Cross Document Messaging)。新一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。
使用方法如下:
说明:
- otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性,window.open的返回值等。
- message: 所要发送的数据,string类型。
- targetOrigin: 用于限制otherWindow,“*”表示不作限制。
www.a.com/a.html中的代码:
html:
1
|
|
script:
1
2
3
4
5
6
|
window.onload = function () {
var ifr = document.getElementById( 'ifr' );
// 若写成'http://www.c.com'就不会执行postMessage了
ifr.contentWindow.postMessage( 'sayHello' , targetOrigin);
}; |
www.b.com/b.html的script
1
2
3
4
5
6
7
8
|
//通过message事件来通信,实在太爽了 window.addEventListener( 'message' , function (e){
// 通过origin属性判断消息来源地址
e.data== 'sayHello' ) {
alert( 'Hello World' );
}
}, false ); |
3.6、使用flash
由于本人对flash不怎么熟悉,此处暂时忽略之~
3.7、Cross Frame
行文至此,突然在口碑网UED博客上看到了一篇 《跨域资源共享的10种方式》,对跨域的多种方法都有介绍(虽然有源码,但多数都是直接调用YUI库的,比较难看出原理)。
里面提到了Cross Frame这种方法,似乎挺不错的,改日一定翻源码来研究。
4、总结
研究了几天,虽然对多种跨域方法都有所了解了,但是真要投入应用还是明显不够的(还是需要借助一些js库)。
每种方法都有其优缺点,使用的时候其实应该将多种跨域方法进一步封装一下,统一调用的接口,利用js来自动判断哪种方法更为适用 。
发表评论
-
Javascript的分层概念
2011-12-07 17:27 1272Javascript如何分层: 我们把 ... -
一道诡异的js面试题
2011-11-09 17:46 1904请给出如下两段程序的执行结果: 第一种情况: <sc ... -
JavaScript在IE和Firefox下的兼容性问题
2011-11-09 16:45 1717(一) 问题1:获取一个元素对象的引用,在IE下,可直接使用该 ... -
Jquery性能优化
2011-11-08 15:47 1049之前,我们减少字节数 ... -
雅虎网页优化14条准则
2011-11-04 15:27 1478网站最基本的东西是什么? ——内容?SEO(搜索引擎优化)?U ... -
对String对象进行扩展,使其具有去掉字符串前后空格的方法
2011-11-02 11:27 1840通过正则表达式可以实现题目要求具体代码如下: <htm ... -
前端开发性能优化规范
2011-11-01 11:00 1网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端 ... -
javascript跨域解决方案(一)
2011-10-28 16:42 107391、神马是跨域(Cross Domain) 说白点就是p ... -
如何确保页面中的js加载完全
2011-10-28 11:19 1520如何确定一个js是否加载完全或者页面中的所有js加载完全,具体 ... -
javascript性能优化准则
2011-10-28 10:54 14javascript性能优化准则: 1.将脚本放在底部 2 ... -
js字符串连接性能问题
2011-10-27 21:00 1104大多数情况下,加法运算符是首选;如果用户主要使用IE ... -
javascript闭包概念的理解
2011-10-27 09:17 13111.什么是闭包? 闭包,就是封闭了外部函数作用域中 ... -
点击页面标签弹出 标签名字的两种方式
2011-10-26 15:36 1281第一种解决办法是jquery的方式: <script ... -
js中innerHTML、outHTML和innerText的用法与区别
2011-10-19 16:15 6087js中innerHTML与innerText的用法与区别 用法 ... -
JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
2011-10-17 16:25 1482做BS开发就难免会用到ja ... -
javascript异步加载方案
2011-08-02 09:56 5394javascript延迟加载的解决方案: 1.使用defer ... -
Js中的undefined,null,NaN,Bool以及类型判断
2011-07-21 19:35 41901.类型分析: jav ... -
js单引号中嵌套单引号的问题的正确写法
2011-06-16 11:25 3117例如我们要写如下一段代码: this.div.InnerHT ... -
不唐突的JavaScript的七条准则
2011-04-25 11:03 1049经过多年的开发、教学和编写不唐突的JavaScript, 我发 ... -
javascript数组定义
2011-04-21 13:56 1125数组有四种定义的方式 使用构造函数: var a = new ...
相关推荐
Javascript跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
NULL 博文链接:https://sun123start.iteye.com/blog/2150778
分享转载:前端常见跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx...
主要介绍了javascript跨域原因以及解决方案分享,十分的细致全面,有需要的小伙伴可以参考下。
由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?
javascript 跨域访问 综合解决方案
同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容。 正是由于这个原因,我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景:WebApi作为...
跨域问题的解决方案1
和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定。所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource ...
为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略。现在所有支持JavaScript的浏览器都会使用这个策略。 同源:域名、协议、端口均相同的网站即为同源。 流程: 当一个浏览器的...
在自己页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题, 解决方案:jQuery.support.cors = true; (浏览器支持跨域访问), 实例: 代码如下: //浏览器支持跨域访问 jQuery.support.cors = true; $.ajax...
最近处理几个项目,设计服务器,所以研究了下跨域问题,综合总结了下,同行们多给点意见,其中涉及前端解决(最基本),JavaScript解决,socket解决,JSONP解决等,个人推荐使用socket和JSONP,使用方便,还稳定。
讲到跨域通信,我们首先要了解什么是跨域?跨域大致的意思就是,比如:www.XXX.com域名下的js是不能操作www.YYY.com域名下的对象或者元素
下面小编就为大家带来一篇js原生跨域_用script标签的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了解决ajax不能访问本地文件问题(利用js跨域原理),具有一定的参考价值,有兴趣的可以了解一下。
3、解决方案: (1) JSONP:只支持GET方式 (2) CROS:跨域资源共享 以下为CROS解决方案: a.在WebService接口加上响应头信息: b.在web.config文件中加上相关配置节信息: 运用a或者b的解决方案后,浏览器头...
javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。跨域简单的理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com...
这里对跨域做个简单介绍以及提供几种解决办法。 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,所以AJAX是不允许跨域的。这里提供自己常用的三种方法: 1、jsonp...