页面域关系：
主页面a.html所属域A：http://172.29.20.21:8080/test;假设地址：http://172.29.20.21:8080/test/a.html
被iframe的页面b.html所属域B：http://172.29.20.22:8080/test 假设地址：http://172.29.20.22:8080/test/b.html
实现效果：
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要同过b.html中的js代码控制a.html中的iframe自适应大小.
问题本质:
js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.html的高度和宽度.
解决方案:
引入代理代理页面c.html与a.html所属相同域A，c.html是A域下提供好的中间代理页面，假设c.html的地址：http://172.29.20.21:8080/test/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.
代码如下：
a.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="height:100%;width: 100%;overflow-y: scroll">
<iframe height="671" width="958px;" style="position:absolute;visibility:hidden;z-index:0;overflow-x: hidden;display: none;"></iframe>
<iframe id="realIframe" name="realIframe" height="100%" width="958px" frameborder="0" src="http://172.29.20.22:8080/test/b.html" scrolling="no" style="border-right-width: 0px; overflow-x: hidden; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; marginheight: 0px; vspace: 0px;" ></iframe>
</div>
</body>
</html>
b.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
</head>
<script type="text/javascript">
/**
* Description:重新设置父IFRAME的高度
* Author: roger
* Email:luo.luoyifan
* Version: 1
* @param: 无
**/
function reSizeParentIframe(special){
var realHeight=0;
if (navigator.userAgent.indexOf("Firefox")>0||navigator.userAgent.indexOf("Mozilla")>0||navigator.userAgent.indexOf("Safari")>0) { // Mozilla, Safari, ...
realHeight=window.document.documentElement.offsetHeight + 2;//firefox中HTML和IE中计算不一样，它四舍五入了，所以要加上1才能
} else if (navigator.userAgent.indexOf("MSIE")>0) { // IE
var bodyScrollHeight = window.document.body.scrollHeight + 21;//取得body的scrollHeight
var elementScrollHeight = window.document.documentElement.scrollHeight + 1;//取得documentElement的scrollHeight
if(special){
realHeight = bodyScrollHeight;
}else{
realHeight = Math.max(bodyScrollHeight,elementScrollHeight);//取当中比较大的一个
}
}else{//其他浏览器
realHeight=window.document.body.scrollHeight + window.document.body.clientHeight + 1;
}
if(realHeight<400){
realHeight = 400;
}
try{
if(window.parent.document){
if($("#realIframe",window.parent.document).is("iframe")){
$("#realIframe",window.parent.document).height(realHeight);
}
}else{
var localIframe = document.getElementById("localIframe");
var hashurl = CFG.sysReSizeUrl+"?timeStr="+getNowTime()+"#"+realHeight;
localIframe.src = hashurl;
};
}catch(e){
var localIframe = document.getElementById("localIframe");
var hashurl = CFG.sysReSizeUrl+"?timeStr="+getNowTime()+"#"+realHeight;
localIframe.src = hashurl;
}
}
reSizeParentIframe();//调用一下重置父iframe的方法
</script>
<body>
<div>此div的高度动态变化</div>
<iframe id="localIframe" style="display: none;" width="0">此iframe用来加载c.html中间代理</iframe>
</body>
</html>
c.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var realIframe = window.parent.parent.document.getElementById("realIframe");
var hash_url = window.location.hash;
if(hash_url!=""){
var hash_height = hash_url.split("#")[1]+"px";
realIframe.style.height = hash_height;
}
</script>
</head>
<body>
</body>
</html>
具体流程如下：
访问
http://172.29.20.21:8080/test/a.html那么a回去请求b，由于a与b不是一个域的，所以在b页面建一个iframe去请求c，通过c得到b传给c的高度然后对a中的frame进行设置