http://jiangzhenghua.iteye.com/blog/1221184
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
1
2
3
4
5
|
//因为c.html和a.html属于同一个域, //所以可以改变其location.hash的值 //可通过parent.parent获取a.html的window对象 parent.parent.location.hash = self.location.hash.substring(1);
|
可能有人会有疑问,既然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+ 。
使用方法如下:
1
|
otherWindow.postMessage(message, targetOrigin); |
说明:
- 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跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
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...