在某些应用场景下，需要在主域中，调用子域中的某个接口，如果直接在主域中向子域发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请求了，这种类似“代理”方式可以解决主子域的跨域问题。