首页 > 代码库 > js中各种跨域问题实战小结(二)
js中各种跨域问题实战小结(二)
这里接上篇:js中各种跨域问题实战小结(一)
后面继续学习的过程中,对上面第一篇有稍作休整。下面继续第二部分:
-->5.利用iframe和location.hash
-->6.window.name跨域实现
利用iframe和location.hash实现跨域
想必有很多人像我之前一样,或许只知道上面文中所说的那几种方法。所以,我刚了解到可以用iframe和location.hash来实现跨域的时候,我会想,为什么他们可以实现。iframe是什么,有什么特性,location.hash是什么又有什么特性。
准备:
>>1.MDN上说的<iframe>:HTML 的<iframe>(HTML inline框架元素)是一个嵌套的浏览上下文,他可以有效地嵌入另一个HTML页面到当前页面。在HTML 4.01中,一个文件可能包含一个头和一个身体或头部和一个框架集,而不是一个身体和一个框架集。然而,一个< iframe >可以被应用在正常的文件体。每个浏览上下文有它自己的会话历史和活动文档。浏览上下文包含嵌入的内容叫做父浏览上下文。顶级的浏览上下文(没有父)是典型的浏览器窗口。
了解到了<iframe>,我觉得另外两个相似的标签<frame>和<frameset>可以一起拿过来看下啦,这有篇文章放在一起总结了下:Frameset,Frame和Iframe
>>2.window.location:打开chrome的console,一起来试一下,很快就懂啦。我们从最基本的开始:
2.1 可以跳转到另一个页面:打开百度搜索的主页,然后在console中输入下面代码:
window.location = "http://www.cnblogs.com/skylar/";
看,是不是跳转到我的博客主页啦。
2.2 强制从服务器重新加载页面:既然来到了我的博客主页,就先别走,继续输入下面代码:
window.location.reload(true);
可以看到页面被重新加载了。
2.3 然后可以点击进去比如js中各种跨域问题实战小结(一)这篇文章,console输入:
location.hash = ‘#comments‘;
看看页面是不是跳到了最下面评论的位置。
其实还有两个特性:比如说alert当前url属性,通过修改window.location.search属性向服务器发送一个字符串,这你可以移步这里自行脑补:MDN window.location 。
这里有用的是下面这个例子:location.hash理解demo
这里可以查看代码:https://github.com/zhangmengxue,因为我们就是要利用location.hash的特性来加上iframe来实现跨域,看完了这个demo,我们就可以开始实现跨域了。(请用chrome打开,还有些需要总结的兼容性问题)
实现:
我为了模拟两个不同的域,在SAE上面创建了两个wordpress应用,如果你之前也不懂SAE是什么的话,这个小简介:新浪SAE 会让你大致了解到SAE是做什么的,如何开始使用它。我的两个应用:
看到url了吧,是不同域喔,环境模拟好了,我可以开始尝试跨域了。
在[http://1.daeskylar.sinaapp.com/]下有两个文件 a.html和c.html;
在[http://1.skylarisdae.sinaapp.com/]下有文件 b.html
我想要在a.html中访问我在b.html中模拟的数据Helloworld!
好呀,那现在点击 有a.html和c.html的这个域 访问我在这个域上的a.html文件,它应该会告诉你他是a.html页面,然后他会访问到了我放在b.html中的HelloWorld!
跨域这样就实现了喔,那具体是怎样实现的呢?
原理:
a.html想和b.html通信(在a.html中动态创建一个b.html的iframe来发送请求);
但是由于“同源策略”的限制他们无法进行交流(b.html无法返回数据),于是就找个中间人:与a.html同域的c.html;
b.html将数据传给c.html(b.html中创建c.html的iframe),由于c.html和a.html同源,于是可通过c.html将返回的数据传回给a.html,从而达到跨域的效果。
三个页面之间传递参数用的是location.hash,改变hash并不会导致页面刷新(这点很重要)。
------------------------------------------------------------------------------------------------------------------------------------------------
a.html---①--->b.html----②--->c.html---③--->a.html——>a.html便获得到了b.html中的数据
①通过iframe的location.hash传参数给b.html ;
②通过iframe的location.hash传参数给c.html ;
③同域传给a.html。
-------------------------------------------------------------------------------------------------------------------------------------------------
代码:
a.html:
1 <!doctype html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <title>localhost:a.html</title> 6 7 <style type="text/css"> 8 9 </style>10 </head>11 12 <body>13 <script type="text/javascript">14 alert(‘我是a页面‘);15 function sendRequest(){16 //动态创建个iframe17 var ifr = document.createElement(‘iframe‘);18 ifr.style.display = ‘none‘;19 //跨域发送请求给b.html,参数是#sayHello20 ifr.src = http://www.mamicode.com/‘http://1.skylarisdae.sinaapp.com/b.html#sayHello‘;21 document.body.appendChild(ifr);22 }23 function checkHash(){24 var data = http://www.mamicode.com/location.hash?location.hash.substring(1):‘‘;25 if(data){26 //这里处理返回值27 alert(data);28 location.hash = ‘‘;29 }30 }31 setInterval(checkHash,1000);32 window.onload = sendRequest;33 </script>34 </body>35 </html>
c.html:
1 <!doctype html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <title>localhost:c.html</title> 6 7 <style type="text/css"> 8 9 </style>10 </head>11 12 <body>13 <script type="text/javascript">14 //因为c.html和a.html属于同一个域,所以可以通过改变其location.hash的值,可以通过parent.parent获取a.html的window对象15 parent.parent.location.hash = self.location.hash.substring(1);16 </script>17 </body>18 </html>
b.html:
1 <!doctype html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <title>另某个域的:b.html</title> 6 7 <style type="text/css"> 8 9 </style>10 </head>11 12 <body>13 <script type="text/javascript">14 function checkHash(){15 var data = http://www.mamicode.com/‘‘;16 //模拟一个简单的参数处理操作17 switch(location.hash){18 case ‘#sayHello‘:19 data = http://www.mamicode.com/‘HelloWorld‘;20 break;21 case ‘#sayHi‘:22 data = http://www.mamicode.com/‘HiWorld‘;23 break;24 default : break;25 }26 data && callBack(‘#‘+data);27 }28 function callBack(hash){29 var proxy = document.createElement(‘iframe‘);30 proxy.style.display = ‘none‘;31 proxy.src = http://www.mamicode.com/‘http://1.daeskylar.sinaapp.com/c.html‘+hash;32 document.body.appendChild(proxy);33 }34 window.onload = checkHash;35 </script>36 </body>37 </html>
这里参考了:javascript跨域详解
利用window.name实现跨域
实现:
我还是利用上面我在sae上面创建的应用:
在[http://1.daeskylar.sinaapp.com/]下有两个文件 wantdata.html和proxy.html;
在[http://1.skylarisdae.sinaapp.com/]下有文件 data.html。
我想要在wantdata.html中访问到我在data.html中存在window.name中的数据,是个字符串,就叫‘我拿到数据啦!’。
访问这里:http://1.daeskylar.sinaapp.com/wantdata.html 应该可以看到alert出的数据喔。
原理:
MDN上的window.name是这样说的:
窗口的名称,主要用于设置超链接和表格对象。Windows不需要有名字。
它也被用于提供跨域通信的一些框架(例如,sessionvars和Dojo的DojoX。IO。windowname)为JSONP更安全的替代方案。
window.name 的美妙之处在于:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
这篇文章讲解的非常详细,很值得阅读:使用window.name解决跨域问题
实现起来基本步骤如下:
1.创建一个iframe,把其src指向目标页面(提供web service的页面,该目标页面会把数据附加到这个iframe的window.name上,大小一般为2M,IE和firefox下可以大至32M左右;数据格式可以自定义,如json字符串);
2.监听iframe的onload事件,在此事件中立即设置这个iframe的src指向本地域的某个页面,由本地域的这个页面读取iframe的window.name。
3.获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
代码:
wantdata.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <title>window.name跨域demo</title> 6 7 <style type="text/css"> 8 9 </style>10 </head>11 12 <body>13 <script type="text/javascript">14 var state = 0, 15 iframe = document.createElement(‘iframe‘),16 loadfn = function() {17 if (state === 1) {18 var data = http://www.mamicode.com/iframe.contentWindow.name; // 读取数据19 alert(data); //弹出‘拿到数据啦!‘20 //下面立即销毁iframe,释放内存,也保证安全21 iframe.contentWindow.document.write(‘‘);22 iframe.contentWindow.close();23 document.body.removeChild(iframe);24 } else if (state === 0) {25 state = 1;26 iframe.contentWindow.location = "http://1.daeskylar.sinaapp.com/proxy.html"; // 设置的代理文件27 } 28 };29 iframe.src = http://www.mamicode.com/‘http://1.skylarisdae.sinaapp.com/data.html‘;30 if (iframe.attachEvent) {31 iframe.attachEvent(‘onload‘, loadfn);32 } else {33 iframe.onload = loadfn;34 }35 document.body.appendChild(iframe);36 </script>37 </body>38 </html>
data.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <title>data页</title> 6 7 <style type="text/css"> 8 9 </style>10 </head>11 12 <body>13 <script type="text/javascript">14 window.name = ‘拿到跨域的数据啦!‘; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右15 // 数据格式可以自定义,如json、字符串16 </script>17 </body>18 </html>
proxy.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <title>window.name跨域demo</title> 6 7 <style type="text/css"> 8 9 </style>10 </head>11 12 <body>13 <span>这里是代理空文件</span>14 <script type="text/javascript">15 16 </script>17 </body>18 </html>
这里参考了:window.name实现跨域数据传输 使用window.name解决跨域问题
从一大早写到现在了,午觉也没睡,写不动了,后面再来个三吧,补上:
-->7.HTML5 postMessage实现跨域
js中各种跨域问题实战小结(二)