iframe 跨域 高度自适应 --ifram高度实时可变

iframe 跨域 高度自适应

a.com/a.html iframe下面文件 b.com/b.html

1、建立a.html 以及 c.html 在a.com域下。
a.html内容大致如下：

<iframe id="iframeB" style="height: 100px;" name="iframeB" 
src="http://b.com/b.html" frameborder="0" scrolling="no" width="100%"
 height="auto"></iframe>

c.html内容大致如下：

function pseth() {
var iObj = parent.parent.document.getElementById('iframeB');
//A和main同域，所以可以访问节点
iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;
//访问自己的location对象获取hash值
iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
setTimeout("pseth()",1000);
}
pseth();
</script>

2、建立b.com域下建立b.html, 加入如下代码

<iframe id="iframeA" name="iframeA" src="" width="0" height="0"
 style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = jQuery("body").height();
urlC = "http://a.com/c.html"; //设置iframeA的src
document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
setTimeout("sethash()",1000);
}
window.onload=sethash;
</script>

原理分析：通过b.html的js计算出b.html的高度，通过hash来传递给c.html，c.html内js获得该hash值，通过js改变本域的a.html的iframe高度。

注意额外添加的两个循环执行：

setTimeout("sethash()",1000); 
 setTimeout("pseth()",1000);

它们的作用，是每隔一秒就获取一次b.html的高度，并传递给c.html，而c.html每隔一秒改变一次a.html中iframe的高度。这样就达到了b.html高度变化则a.html相应变化的目的。