• ajax主域和子域之间的跨域问题


    【转发】http://www.cnblogs.com/adtxgc/p/4691872.html

    iframe解决ajax主域和子域之间的跨域问题

     

    在某些应用场景下,需要在主域中,调用子域中的某个接口,如果直接在主域中向子域发ajax请求,会报跨域错误,可以用iframe来解决这种跨域问题。
    假如主域为www.baidu.com,子域为baike.baidu.com。主域中的A页面需要通过ajax请求调用子域中的某项服务。首先需要在子域中准备一个B页面,B页面就是一个简单的空页面,最好把jquery引到B页面中,这样可以直接用jquery发ajax请求;在主域的A页面中要用iframe把B页面url地址引过来。

    B页面格式

    复制代码
     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页面格式

    复制代码
     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请求了,这种类似“代理”方式可以解决主子域的跨域问题。

    未来的你会感谢现在努力的你
  • 相关阅读:
    Sublime Text 在同一窗口同时显示多个项目文件夹
    前端之PS切图
    Sublime Text 菜单栏消失问题
    php中的排序算法
    vim 108上下左右键失效?
    写一个自己的markdown解析器
    2016.年末总结
    闭包
    JavaScript事件委托
    const参数,const返回值与const函数
  • 原文地址:https://www.cnblogs.com/cjxblogs/p/6842963.html
Copyright © 2020-2023  润新知