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

时间 2019-11-30

标签 iframe 解决 ajax 子域之间问题栏目 HTML 繁體版

原文原文链接

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

B页面格式html

 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页面格式java

 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请求了，这种相似“代理”方式能够解决主子域的跨域问题。jquery