跨域

需要跨域的三种情况：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递

实现跨域的几种方法：

1.window.name

如a.com网站想通过JS获取b.com网站的数据

在a.com网站添加一个空HTML页。名称为：http://a.com/null.html
在a.com网站需要获取数据页面(如：http://a.com/getDomainData.html)内容如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>跨域获取数据</title>
 5     <script type="text/javascript">
 6     function domainData(url, fn)
 7     {
 8         var isFirst = true;
 9         var iframe = document.createElement('iframe');
10         iframe.style.display = 'none';
11         var loadfn = function(){
12             if(isFirst){
13                 iframe.contentWindow.location = 'http://a.com/null.html';
14                 isFirst = false;
15             } else {
16                 fn(iframe.contentWindow.name);
17                 iframe.contentWindow.document.write('');
18                 iframe.contentWindow.close();
19                 document.body.removeChild(iframe);
20                 iframe.src = '';
21                 iframe = null;
22             }
23         };
24         iframe.src = url;
25         if(iframe.attachEvent){
26             iframe.attachEvent('onload', loadfn);
27         } else {
28             iframe.onload = loadfn;
29         }
30 
31         document.body.appendChild(iframe);
32     }
33     </script>
34 </head>
35 <body>
37 </body>
38     <script type="text/javascript">
39     domainData('http://b.com/data.html', function(data){
40         alert(data);
41     });
42     </script>
43 </html>

在b.com中添加获取数据页面如：http://b.com/data.html 内容需包含：

1 <script>
2 　　window.name = '需要跨域传递的数据';
3 </script>

访问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。

2.window.location.hash

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。

3.window.domain=" "

参考资料

4.flash

5.html5 postMessage

参考资料

6.jsonp

7.服务器代理：XMLHttpRequest代理文件

之前在某厂的面试中遇到过jsonp的问题，现在总结一下。

所谓的jsonp技术也就是动态创建script标签，把src地址设置为你的请求文件，通过src的callback函数，在服务器得到响应，返回相应的json数据，并且在服务器端执行该相同名称的函数。

因为同源策略，只有同一个域名下的文件才可以互相访问,详见下表：

编号	URL	说明	是否允许通信
1	http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
2	http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
3	http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
4	http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
5	http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
6	http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
7	http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
8	http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

 1 <script type="text/javascript">
 2     function createScript(str){
 3         var oScript=document.createElement('script');
 4         oScript.type='text/javascript';
 5         oScript.src=str;
 6         document.getElementsByTagName('head')[0].append(oScript);
 7 
 8     }
 9     function json(data){
10         console.log(data.name)
11     }
12     </script>
13     <script type="text/javascript" src="http://www.paxst.com/index.php?id=1202&update=0811"></script>

1 json({name:'paxster'})

客户端的函数名称和服务器端函数名称一致，服务器端执行json函数。

页面代理实现跨域：

要实现跨域，第一步需要①A.com/a.html请求到③B.com/b.html;第二步需要B.com/b.html返回数据到A.com/a.html

通过②proxy.html来做中间桥梁，实现①和③的跨域。

首先通过最内层②来链接桥梁，③属于②的子页面，可以传递参数，所以把②的需要的内容请求到①；

b.html内嵌proxy.html是通过一段类似下面这样的代码：

1 <iframe id=”proxy” src=”a.com/proxy.html” name=”proxy” frameborder=”0″ width=”0″ height=”0″></iframe>

这个iframe的src属性b.html是有权限控制的。如果它把src设置成a.com/proxy.html?args=XXX,也就是给url加一个查询字符串，proxy.html内的js是可以读取到的。对的，这个url的查询字符串就是b.html和proxy.html之间通信的桥梁，美中不足的是每次通信都要重写一次url造成一次网络请求，这有时会对服务器及页面的运行效率产生很大的影响。

当proxy.html拿到a.html发送过来的数据后把这个数据写入window.name中，然后跳转到b.com下面的代理页面，我们这里假设是bproxy.html。bproxy.html读取到 window.name值后，通知给它父页面b.html就简单了

参考资料

另外一篇不错的总结

无双博客总结