JavaScript跨域详解(2)

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

//通过动态创建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

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

//因为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+ 。

使用方法如下:

otherWindow.postMessage(message, targetOrigin);

说明:

  • otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性,window.open的返回值等。
  • message: 所要发送的数据,string类型。
  • targetOrigin: 用于限制otherWindow,“*”表示不作限制。

www.a.com/a.html中的代码:

html:

<iframe id="ifr" src="http://www.b.com/b.html"></iframe>

script:

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

//通过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跨域详解(1)

发布者

Rolf

伪文艺IT攻城师,热爱前端,热爱互联。

《JavaScript跨域详解(2)》有3个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[喜欢] [嘻嘻] [奋斗] [问号] [鼓掌] [泪] [酷] [强] [耶] [握手] [心] [给力] [神马] [围观] [奥特曼] more »