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