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

B页面格式

 //B.html

 <html>

 <head>

     <title>B页面</title>

     <script type="text/javascript" src="jquery.js"></script>

 </head>

 <body>

     <div>B页面</div>

     <script>

         $(function(){

             try{

             document.domain = "www.baidu.com";

             }catch(e){}

         });

     </script>

 </body>

 </html>

A页面格式

 //A.html

 <html>

 <head>

     <title>A页面</title>

     <script type="text/javascript" src="jquery.js"></script>

 </head>

 <body>

     <div>A页面</div>

     <iframe id="iframe" src="http://baike.baidu.com/B.html" style="display:none;"></iframe>

     <script>

         $(function(){

             try{

                 document.domain = "www.baidu.com";

             }catch(e){}

             $("#iframe").load(function(){

                 var iframe = $("#iframe").contentDocument.$;

                 ifram.get("http://baike.baidu.com/接口",function(data){});

             });

         });

     </script>

 <body>

 </html>

有一点需要注意，就是在A页面中，要等iframe标签完成加载B页面之后，再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载，在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。一旦取到B页面中的jQuery对象，就可以直接发ajax请求了，这种类似“代理”方式可以解决主子域的跨域问题。

iframe解决ajax主域和子域之间的跨域问题的更多相关文章

  1. javascript 跨域请求详细分析(终极跨域解决办法)

    自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...

  2. 跨域问题解决方案(HttpClient安全跨域 & jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会 ...

  3. 跨域问题解决方式(HttpClient安全跨域 &amp; jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, ...

  4. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  5. webapi 跨域访问设置基于jsonp跨域

    JSONP实现跨域 Web API并没有提供JSONP  Formatter,但是这并不能影响我们前进的脚步,我们可以自定义Formatter来实现JSONP功能.既然是利用JSONP跨域,那么就得简 ...

  6. SpringMvc支持跨域访问，Spring跨域访问，SpringMvc @CrossOrigin 跨域

    SpringMvc支持跨域访问,Spring跨域访问,SpringMvc @CrossOrigin 跨域 >>>>>>>>>>>> ...

  7. SpringMvc支持跨域访问，Spring跨域访问，SpringMvc @CrossOrigin 跨域[转]

    SpringMvc支持跨域访问,Spring跨域访问,SpringMvc @CrossOrigin 跨域 原文地址:https://www.cnblogs.com/fanshuyao/p/716847 ...

  8. 利用 iframe解决ajax的跨域问题

    问题 1. form提交或a标签跳转方式提交不会引发跨域问题. 2. ajax出于安全问题就有了跨域问题,因为一次请求中既访问了外部域最后返回了自己的域. 3. 用iframe其实就是想仿照ajax的 ...

  9. AJAX中的跨域问题：什么是跨域？如何解决跨域问题？

    域不一样的,即为跨域,包括(协议,域名,端口号) 1. 指定允许其他域名访问 header('Access-Control-Allow-Origin:*'); 2.使用jsonp

随机推荐

  1. eclipse 添加svn资源库卡死。长时间等待

    使用https://localhost:8443/svn/xx方式打入浏览器判断其服务器是否正常 如果正常通过,而eclipse新建库卡死时.可以等待一点时间看是否卡 问题依旧,考虑更改地址 主机名 ...

  2. 《算法》第五章部分程序 part 6

    ▶ 书中第五章部分程序,包括在加上自己补充的代码,非确定性有穷自动机(NFA),grep 命令(利用 NFA 匹配) ● 非确定性有穷自动机(NFA) package package01; impor ...

  3. 《算法》第四章部分程序 part 2

    ▶ 书中第四章部分程序,加上自己补充的代码,随机生成各类无向图 ● 随机生成无向图 package package01; import edu.princeton.cs.algs4.StdOut; i ...

  4. python学习笔记_week4

    装饰器: 定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数即“变量” impor ...

  5. oozie 工作流调试及报错

    1.  oozie 调用sql文件的workflow 错误汇总: 1)hive2server密码错误.(有时设置可以无密码,有时需要登陆密码,有时是单独的hive2server密码) Connecti ...

  6. kettle实现sqlserver与mysql的连接并写入mysql

    1.新建转换databasejoin 2.添加两个db连接 mysql的db连接kettlemysql以及sqlserver2008的db连接kettlesql 前提是在\data-integrati ...

  7. SPARK快学大数据分析概要

    Spark 是一个用来实现快速而通用的集群计算的平台.在速度方面,Spark 扩展了广泛使用的MapReduce 计算模型,而且高效地支持更多计算模式,包括交互式查询和流处理.在处理大规模数据集时,速 ...

  8. debug_toolbar工作原理

    #toolbar的中间件的响应处理函数,会调用到panel.generate_stats(request, response)def process_response(self, request, r ...

  9. java 设计模式http://www.runoob.com/design-pattern/design-pattern-tutorial.html

    参考:http://www.runoob.com/design-pattern/design-pattern-tutorial.html

  10. 20165304 实验二 Java面向对象程序设计

    一.面向对象程序设计1--单元测试和TDD 实验要求 1.参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECUNITTEST 完成单元测试的学习 2 ...