其他：js实现跨域访问

电玩女神 2022-05-21 13:45 155阅读 0赞

转自：[点自这里][Link 1]

javascript跨域访问是web开发者经常遇到的问题，什么是跨域，一个域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实现javascript跨域方法:   
  
**1.基于iframe实现跨域**   
  
     基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下：   
页面一：

Html代码     ![收藏代码][21115439_UUri.png]

1.  **<****html****>**  
2.  **<****head****>**  
3.    **<****script****>**  
4.     document.domain = "xx.com";  
5.      function a()\{  
6.        alert("p");  
7.     \}  
8.    **</****script****>**  
9.  **</****head****>**  
10. **<****body****>**  
11.    **<****iframe** src="http://localhost:8080/CmsUI/2.html" id="i"**>**  
12.      
13.    **</****iframe****>**  
14.    **<****script****>**  
15.   document.getElementById('i').onload = function()\{  
16.      var d = document.getElementById('i').contentWindow;  
17.      d.aa();  
18.        
19.  \};  
20.    **</****script****>**  
21.  **</****body****>**  
22. **</****html****>**

页面二：

Html代码     ![收藏代码][21115439_UUri.png]

1.  **<****html****>**  
2.   **<****head****>**  
3.    **<****script****>**  
4.      document.domain = "xx.com";  
5.      function aa()\{  
6.      alert("c");  
7.       \}  
8.    **</****script****>**  
9.   **</****head****>**  
10.  **<****body****>**  
11.  **</****body****>**  
12. **</****html****>**

这时候父页面就可以调用子页面的aa函数，实现js跨域访问   
  
**2.基于script标签实现跨域**   
  
     script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下：

Java代码     ![收藏代码][21115439_UUri.png]

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

这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。   
jquery中对jsonp的支持也是基于此方案。   
  
**3.后台代理方式**   
  
     这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。

[Link 1]: https://m.baidu.com/from=1086k/bd_page_type=1/ssid=0/uid=0/pu=usm%401%2Csz%401320_2002%2Cta%40iphone_1__2_7.1/baiduid=79254DE3BE42B82C9A67ACF6F46173FA/w=0_10_/t=iphone/l=3/tc?ref=www_iphone&lid=10703104271343248901&order=2&fm=alop&tj=www_normal_2_0_10_title&vit=osres&m=8&srd=1&cltj=cloud_title&asres=1&title=%E4%B8%89%E7%A7%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0js%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE--ITeye%E5%8D%9A%E5%AE%A2&dict=30&w_qd=IlPT2AEptyoA_ykw8RMote_5_EtSnZsa7EoMoe3&sec=25744&di=5f17d7bedf22385d&bdenc=1&tch=124.399.56.373.1.321&nsrc=IlPT2AEptyoA_yixCFOxXnANedT62v3IGBODQDpL0jin95SjfenaXdNpX8KhVnmKHE_wdoTPtRcJxHOh&eqid=948910a097616800100000005a1c4208&wd=&clk_info=%7B%22srcid%22%3A1599%2C%22tplname%22%3A%22www_normal%22%2C%22t%22%3A1511801366053%2C%22xpath%22%3A%22div-a-h3%22%7D&sfOpen=1
[21115439_UUri.png]: /images/20220521/4818f8c410404e9cbb8f5f0d89a50aa1.png