`

javascript跨域解决方案(二)

 
阅读更多

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
  ifr.src = 'http://www.b.com/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"域下
  proxy.src = 'http://www.a.com/c.html'+hash;
  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
<iframe id="ifr" src="http://www.b.com/b.html"></iframe>

script:

 
1
2
3
4
5
6
window.onload = function() {
    var ifr = document.getElementById('ifr');
    // 若写成'http://www.c.com'就不会执行postMessage了
    var targetOrigin = 'http://www.b.com';
    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属性判断消息来源地址
  if (e.origin == 'http://www.a.com' &&
    e.data=='sayHello') {
    alert('Hello World');
  }
}, false);

 

3.6、使用flash

由于本人对flash不怎么熟悉,此处暂时忽略之~

 

3.7、Cross Frame

行文至此,突然在口碑网UED博客上看到了一篇 《跨域资源共享的10种方式》,对跨域的多种方法都有介绍(虽然有源码,但多数都是直接调用YUI库的,比较难看出原理)。

里面提到了Cross Frame这种方法,似乎挺不错的,改日一定翻源码来研究。

 

4、总结

研究了几天,虽然对多种跨域方法都有所了解了,但是真要投入应用还是明显不够的(还是需要借助一些js库)。

每种方法都有其优缺点,使用的时候其实应该将多种跨域方法进一步封装一下,统一调用的接口,利用js来自动判断哪种方法更为适用 。

分享到:
评论

相关推荐

    Javascript跨域访问解决方案

    JSONP是一种较早的跨域解决方案,它利用了浏览器允许`&lt;script&gt;`标签跨域加载资源的特性。通过动态创建`&lt;script&gt;`标签,并指定其`src`属性为一个返回JSON数据的函数调用,服务器将数据包裹在函数调用中返回,客户端...

    arcgis api for javascript跨域处理方案

    除了资源代理,还可以使用其他跨域解决方案: - CORS(跨源资源共享):服务器端可以设置CORS头(如`Access-Control-Allow-Origin`),允许特定的源进行跨域请求。这种方法需要服务器端的支持,可能不适用于所有...

    Javascript跨域和Ajax跨域解决方案

    JavaScript跨域和Ajax跨域是Web开发中常见的问题,尤其在进行前后端分离或API调用时,由于浏览器的同源策略限制,不同域名、协议或端口的资源请求会被阻止,这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...

    js跨域解决方案

    1. **JSONP(JSON with Padding)**:JSONP是一种早期的跨域解决方案,它依赖于`&lt;script&gt;`标签不受同源策略限制的特点。通过动态创建`&lt;script&gt;`标签,设置其`src`属性为提供服务的服务器接口,并由服务器返回一个包裹...

    JQuery跨域访问解决方案

    JQuery的跨域解决方案主要依赖于JSONP(JSON with Padding)技术。JSONP是一种绕过同源策略的方式,它利用HTML中的`&lt;script&gt;`标签没有同源策略限制的特点。当jQuery使用`dataType: 'jsonp'`时,它实际上是在做以下几...

    Spring 跨域解决方案官方 demo

    在现代Web开发中,跨域资源共享(CORS)是一个重要的概念,它允许...总之,Spring提供的CORS解决方案让开发者能够轻松处理跨域请求,同时保持应用的安全性。理解并熟练运用这些知识,对于构建现代化的Web应用至关重要。

    xmlhttp跨域解决方案

    **二、XMLHttpRequest跨域解决方案** 1. **JSONP(JSON with Padding)**:JSONP是一种较早的跨域解决方案,适用于GET请求。它利用`&lt;script&gt;`标签不受同源策略限制的特点,通过动态创建`&lt;script&gt;`标签并设置其`src`...

    跨域请求解决方案源代码(JSONP,CORS)

    这个文件可能包含了创建XMLHttpRequest对象、设置请求头、处理响应等内容的JavaScript代码,用于演示如何在实际项目中应用这些跨域解决方案。开发者可以通过查看和运行这些代码来加深对JSONP和CORS的理解,并在自己...

    Ajax跨域访问解决方案

    JSONP是一种早期的跨域解决方案,它是通过动态创建`&lt;script&gt;`标签来加载数据的。因为`&lt;script&gt;`标签不受同源策略限制,可以通过`src`属性指向提供JSON数据的外部服务。服务端返回的数据是一个JavaScript函数调用,...

    javascript跨域方案总结

    CORS是现代浏览器支持的跨域解决方案。服务器通过设置HTTP响应头`Access-Control-Allow-Origin`来指定允许哪些源进行跨域访问。还可以通过其他响应头如`Access-Control-Allow-Methods`、`Access-Control-Allow-...

    MVC中跨域解决方案

    4. JSONP(JSON with Padding):这是一种早期的跨域解决方案,适用于只支持GET请求的API。它通过动态创建`&lt;script&gt;`标签来实现跨域请求。然而,JSONP不提供安全性,只适用于简单请求,且不支持HTTP的其他方法和头。...

    js 跨域解决方案

    本文将深入探讨JavaScript跨域问题及其解决方案,以帮助开发者理解和应对这一问题。 首先,了解同源策略是解决问题的关键。同源策略是浏览器为了保障用户数据安全而实施的一种机制,它禁止了一个源的文档或脚本获取...

    web跨域解决方案.docx

    Web 跨域解决方案 在 Web 开发中,跨域问题是一个常见的问题。跨域问题是指一个域下的脚本无法访问另一个域下的资源的安全限制。这种限制是由浏览器的同源策略(Same-Origin Policy)所引起的。同源策略规定,...

    解决JS跨域访问IFrame的解决方案

    面对这样的问题,我们可以采用以下几种跨域解决方案: 1. **CORS(Cross-Origin Resource Sharing)**:服务器可以通过设置响应头`Access-Control-Allow-Origin`来允许特定的源进行跨域请求。例如,服务器端可以在...

    iframe跨域解决方案

    另外,`CORS`(Cross-Origin Resource Sharing,跨源资源共享)也是一种广泛使用的跨域解决方案,但主要用于xhr(XMLHttpRequest)和fetch请求。不过,对于`iframe`加载的页面,服务器可以通过设置特定的HTTP响应头`...

    前端跨域原理以及跨域解决方案.docx

    #### 四、跨域解决方案 ##### 4.1 JSONP(JSON with Padding) **原理**: 利用`&lt;script&gt;`标签可以跨域加载外部JavaScript文件的特性来实现跨域请求。由于`&lt;script&gt;`标签没有同源策略限制,因此可以用来加载并执行...

    跨域解决方案

    “跨域解决方案” 跨域是指一个域下的脚本请求另一个域下的资源。由于浏览器的同源策略限制,会导致跨域请求无法发送。同源策略是指“协议+域名+端口”三者相同,如果两个不同的域名指向同一个 IP 地址也不行,也...

    前端常见跨域解决方案(全).mht

    分享转载:前端常见跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx...

    前端常见跨域解决方案(全)

    为了解决这些问题,开发者采用了一系列跨域解决方案: 1. JSONP(JSON with Padding)跨域:JSONP是一种利用`&lt;script&gt;`标签不受同源策略限制的特性来实现跨域请求的方法。它通过动态创建`&lt;script&gt;`标签,并设置其`...

Global site tag (gtag.js) - Google Analytics