三种方法实现js跨域访问

缺乏、安全感 2022-07-15 15:21 244阅读 0赞

三种方法实现js跨域访问

[lwaif][]

*  发表于 1年前
 *  阅读 13181
 *  收藏 30
 *  点赞 0
 *  [评论 0 ][0]

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 aa()\{  
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.a();  
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 a()\{  
6.      alert("c");  
7.       \}  
8.    **</****script****>**  
9.   **</****head****>**  
10.  **<****body****>**  
11.  **</****body****>**  
12. **</****html****>**

这时候父页面就可以调用子页面的a函数，实现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]
 *  字数：620

[lwaif]: https://my.oschina.net/lwaif/home
[0]: https://my.oschina.net/lwaif/blog/481154?p=%7b%7btotalPage%7d%7d#comment-list
[21115439_UUri.png]: /images/20220715/5a2bdd8042464c21b4f429a08ffeccf5.png
[Link 1]: https://my.oschina.net/lwaif/blog?catalog=324824