js跨域

通常我们会有一个统一的上传接口，这个接口会被其他的服务调用。如果出现不同域，还需要无刷新上传文件，并且获取返回值，这就有点麻烦了。比如，新浪微博启用了新域名www.weibo.com，但接口还是使用原来的域：picupload.t.sina.com.cn。

研究了一下新浪微博的处理方法，这里大概演示一下。

首先是一个正常的上传页面 upload.html



view plaincopy to clipboardprint?
1.<script>  
2.  // 这个函数将来会被iframe用到  
3.  function getIframeVal(val)  
4.  {  
5.    alert(val);  
6.  }  
7.</script>  
8.  
9.<!-- 我把upload.com指向了127.0.0.1 -->  
10.<form method="post" target="if" enctype="multipart/form-data" action="http://upload.com/playground/js/deal.php?cb=http://localhost/playground/js/deal_cd.html">  
11.  <input type="file" name="file" />  
12.  <input type="SUBMIT" value="upload" />  
13.</form>  
14.<IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>  


这里有一个关键点是form的target要指向iframe，同时把iframe隐藏起来，这样上传的处理结果就会显示在该iframe里。action里的cb(callback)参数表示处理完成后要跳转的url，因为我们的目标是iframe，所以只会把跳转的页面输出到iframe，而不会让当前页面跳转。

还有一点，callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。【这儿如跨域了怎么办呢？】

再来看看deal.php，也就是form的action



view plaincopy to clipboardprint?
1.<?php  
2.// deal upload file  
3.// and get file id, you can pass other params either  
4.header('location:'.$_GET['cb'].'?file_id=123');  


这里可以处理文件，然后入库。操作完成后，把文件的id及其他信息都放在url里，最后跳转到这个url。

最后来看看deal_cd.html，也就是刚刚deal.php跳转到的url，这个文件的内容会填充到页面的iframe里。



view plaincopy to clipboardprint?
1.<script type="text/javascript">  
2.  var rs = window.location.search.split('?').slice(1);  
3.  window.parent.getIframeVal(rs.toString().split('=').slice(1));  
4.</script>  
5.[/html]  
6.  
7.这里调用了父窗口的getIframeVal方法，这样父页面就获得了文件的id。  
8.------------------------------------------------------------------------------------------------------------------------------------------------------  
9.还有一点，callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。【这儿如跨域了怎么办呢？】???  
10.<a href="attachment.php?fid=256" target="_blank"><img src="attachment.php?fid=256" class="insertimage" alt="点击在新窗口中浏览此图片" title="点击在新窗口中浏览此图片" border="0"/></a>  
11.1、document.domain+iframe的设置  
12.  
13.对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地![所以尽量是主域相同]  
14.  
15.www.a.com上的a.html  
16.[codes=html]  
17.<script>  
18.  document.domain = 'a.com';    
19.  // 这个函数将来会被iframe用到  
20.  function getIframeVal(val)  
21.  {  
22.    alert(val);  
23.  }  
24.</script>  
25.  
26.<!-- 我把upload.com指向了127.0.0.1 -->  
27.<form method="post" target="if" enctype="multipart/form-data" action="http://b.a.com/deal.php?cb=http://localhost/playground/js/deal_cd.html">  
28.  <input type="file" name="file" />  
29.  <input type="SUBMIT" value="upload" />  
30.</form>  
31.<IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>  

b.a.com上的deal.php (这个是请求API的页面，如上传文件的页)



view plaincopy to clipboardprint?
1.<?php  
2.// deal upload file  
3.// and get file id, you can pass other params either  
4.header('location:'.$_GET['cb'].'?file_id=123');  
5.echo "<script document.domain = 'a.com';getIframeVal();?> ";//这儿的PHP需要把这个头极其函数调用拼接起来，调用a.com的父亲页面。  

这种方式适用于{www.a.com, a.com, script.a.com, css.a.com}中的任何页面相互通信。这儿的关键在于两个页面都要有设定document.domain =XXX，如果有一个不设定的话，都会报错！！！

备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。
常规用document.domain+iframe的设置，也就是上面这种方法。
当然还有其他的上传跨域方法：利用iframe和location.hash window.name实现的跨域数据传输 Html5等。
如跨域文件上传解决方案：上传文件到A网站，然后通过PHP的ftp函数、或HTTP模拟上传到B，这样的话返回的json一直是在A网站上的；另外也可以参考一下腾讯的，如果两个网站都是你的，比如你a网站的域名为www.a.com，在B网站同时绑定一个域名upload.www.a.com，就可以直接上传到B网站并返回json数据了，来自：http://www.gosenz.com/blog/Default.aspx?__tencentip=10.16.64.112&__tencentid=1&__tencentrawurl=http://www.gosenz.com/blog/?p=89