iframe解决ajax主域和子域之间的跨域问题

在某些应用场景下，需要在主域中，调用子域中的某个接口，如果直接在主域中向子域发ajax请求，会报跨域错误，可以用iframe来解决这种跨域问题。
假如主域为www.baidu.com,子域为baike.baidu.com。主域中的A页面需要通过ajax请求调用子域中的某项服务。首先需要在子域中准备一个B页面，B页面就是一个简单的空页面，最好把jquery引到B页面中，这样可以直接用jquery发ajax请求；在主域的A页面中要用iframe把B页面url地址引过来。

B页面格式

 1 //B.html
 2 <html>
 3 <head>
 4     <title>B页面</title>
 5     <script type="text/javascript" src="jquery.js"></script>
 6 </head>
 7 <body>
 8     <div>B页面</div>
 9     <script>        
10         $(function(){
11             try{
12             document.domain = "www.baidu.com";
13             }catch(e){}
14         });
15     </script>
16 </body>
17 </html>

A页面格式

 1 //A.html
 2 <html>
 3 <head>
 4     <title>A页面</title>
 5     <script type="text/javascript" src="jquery.js"></script>
 6 </head>
 7 <body>
 8     <div>A页面</div>
 9     <iframe id="iframe" src="http://baike.baidu.com/B.html" style="display:none;"></iframe>
10     <script>
11         $(function(){
12             try{
13                 document.domain = "www.baidu.com";
14             }catch(e){}
15             $("#iframe").load(function(){
16                 var iframe = $("#iframe").contentDocument.$;
17                 ifram.get("http://baike.baidu.com/接口",function(data){});
18             });
19         });
20     </script>
21 <body>
22 </html>

有一点需要注意，就是在A页面中，要等iframe标签完成加载B页面之后，再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载，在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。一旦取到B页面中的jQuery对象，就可以直接发ajax请求了，这种类似“代理”方式可以解决主子域的跨域问题。

posted @ 2015-07-31 12:48  adtxgc  阅读(2065)  评论(0)  编辑  收藏  举报