js 跨域

時間 2019-12-09

原文原文鏈接

方案一：

基於iframe實現的跨域要求兩個域具備aa.xx.com,bb.xx.com這種特色，也就是兩個頁面必須屬於一個基礎域（例如都是xxx.com，或是xxx.com.cn），使用同一協議（例如都是 http）和同一端口（例如都是80），這樣在兩個頁面中同時添加document.domain，就能夠實現父頁面調用子頁面的函數，代碼以下：

頁面一：  HTML代碼
<html>  
<head>  
  <script>  
   document.domain = "xx.com";  
    function a(){  
      alert("p");  
   }  
  </script>  
</head>  
<body>  
   <iframe src="http://localhost:8080/CmsUI/2.html" id="i">  
     
   </iframe>  
   <script>  
  document.getElementById('i').onload = function(){  
     var d = document.getElementById('i').contentWindow;  
     d.aa();  
       
 };  
   </script>  
 </body>  
</html>  

頁面二    
<html>  
 <head>  
  <script>  
    document.domain = "xx.com";  
    function aa(){  
    alert("c");  
     }  
  </script>  
 </head>  
 <body>  
 </body>  
</html>

這時候父頁面就能夠調用子頁面的aa函數，實現js跨域訪問

2.基於script標籤實現跨域

script 標籤自己就能夠訪問其餘域的資源，不受瀏覽器同源策略的限制，能夠經過在頁面動態建立script 標籤。代碼以下：

var script = document.createElement('script'); 
script.src = "http://aa.xx.com/js/*.js"; 
document.body.appendChild(script);

這樣經過動態建立script標籤就能夠加載其餘域的js文件，而後經過本頁面就能夠調用加載後js文件的函數，這樣作的缺陷就是不能加載其餘域的文檔

JSONP

JSONP的工做原理是利用了<script> 標籤沒有跨域限制的"漏洞"，來達到與第三方通信的目的。當須要通信時，本站腳本建立一個script 元素，地址指向第三方的API網址，形如：

script.src = "http://192.1.3.115:3000/users/change?callback=process"

並提供一個回調函數來接收數據（函數名可約定，或經過地址參數傳遞）。
第三方產生的響應爲json數據的包裝（故稱之爲jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})

這樣瀏覽器會調用callback函數，並傳遞解析後json對象做爲參數。本站腳本可在callback函數裏處理所傳入的數據。

相關標籤/搜索

每日一句

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