【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度

如题。

网上提供了很多方法。但是在进行测试的时候都会出现这样那样的问题。在一个好同学的帮助下，我使用了这种方法来实现了这个功能。

在父级页面iframe元素外部使用一个<div>元素包围住。然后设置<div>的初始高度不需要设置，设置好宽度，然后被包围的iframe的高度宽度均设置为100%；你也可以不用div，直接通过子页中的方法来修改父级页面iframe的高度。

<!--main begin-->
<div id="iframeHeight">//注意要在css设置好宽度，高度可放空
<iframe id="carMainBox" name="carMainBox" src="dongguan.html" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</div>
<!--main end-->

在被引用的子页中，添加如下的window.inload()函数：

<!--更新外框高度window.load代码-->
<script type="text/javascript">
window.onload=function(num){
try{
var s = parent.document.getElementById('iframeHeight')||null;
}catch(e){}
//是否获取到了div的这个元素，如果获取到了，则设置他的高度为内页高度再加上50px的灵活空间
s?s.style.height = document.body.offsetHeight +50+'px':'';
}
</script>

这个方法可以兼容chrome，IE，firefox，safari等主流浏览器。

注意这个函数的必须要在子页面的高度确定之后执行，否则其高度则会出现不完全的效果。我们可以添加一个延时函数来实现延迟加载onload函数。

在父页面调用下面的方法来强行刷新iframe中的子页面。

setTimeout(function(){sonPage.window.onload();},500);

sonPage会默认get到iframe的里页。然后执行onload函数，500是延时的时长，单位是毫秒。