zoukankan      html  css  js  c++  java
  • 实现跨域访问

     javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 

    1.基于iframe实现跨域 

         基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下: 
    页面一: 

    Html代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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的支持也是基于此方案。 

    使用jsonp实现跨域访问参考地址好文章:http://kb.cnblogs.com/page/139725/

    另外还有

    3、利用iframe和location.hash

    4、window.name实现的跨域数据传输

    5、使用HTML5 postMessage

    6、利用flash

  • 相关阅读:
    javaweb消息中间件——rabbitmq入门
    virtual box 桥接模式(bridge adapter)下无法获取ip(determine ip failed)的解决方法
    Apache Kylin本地启动
    git操作
    Java学习总结
    Java中同步的几种实现方式
    hibernate exception nested transactions not supported 解决方法
    vue 中解决移动端使用 js sdk 在ios 上一直报invalid signature 的问题解决
    cookie 的使用
    vue 专门为了解决修改微信标题而生的项目
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4792309.html
Copyright © 2011-2022 走看看