在某些应用场景下，需要在主域中，调用子域中的某个接口，如果直接在主域中向子域发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请求了，这种类似“代理”方式可以解决主子域的跨域问题。