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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。