ajax主域和子域之間的跨域問題
阿新 • • 發佈：2017-05-12
復制 jquery對象 body content iframe .com post {} log 
【轉發】http://www.cnblogs.com/adtxgc/p/4691872.html
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請求了，這種類似“代理”方式可以解決主子域的跨域問題。
ajax主域和子域之間的跨域問題