网页制作中Iframe自适应高度的解决办法

 进行网页设计时，由于政府网站的海量信息以及标准化的网页制作模式，使得框架网页嵌套成为了首选。这种方式的优越性不仅体现在整个网页整体性的保持及更新上，而且还可以使网站的维护变的相对容易。

    基于界面美观和交互的考虑，在网页制作中隐藏Iframe的border和scrollbar，让人看不出它是个Iframe，而不带边框的Iframe因为能和网页无缝的结合从而在不刷新页面的情况下使更新页面的部分数据成为可能。

    如果Iframe始终调用同一个固定高度的页面，我们直接写死Iframe高度就可以了。由于Iframe要切换页面，或者被包含页面要做动态操作，这时候，就需要程序去同步Iframe高度和被包含页的实际高度了，而Iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦 : 给Iframe设置高度多了的时候会使网页下方出现空白，少了则只能显示部分网页。

    于是在实际工作当中，我总结了一种Iframe动态调整高度的方法，即实现 Iframe 的自适应高度，能够随着页面的长度自动适应以免除页面和 Iframe 同时出现滚动条的现象。

    以“北京出入境检验检疫局”网页设计为例，在点击某一链接后页面头部和左侧不变，右侧跳转到相应内容，实现了Iframe不带边框的自适应文章高度的调节。

    如图所示：

 

图一

 

图二

    现在就把解决方法共享一下：

    方法：在主页面Iframe的onload事件中执行JS，去取得被包含页的高度，然后去同步高度。并在主窗口做一个Interval，不停的来获取被包含页的高度。当Iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。

    代码如下所示：

<Iframe src="cs2-j.html" name="contain" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" id="contain" onload="this.height=100" style=" WIDTH: 100%; "></Iframe>

// height=100这个数值可以根据需要自行设置，即页面加载时显示的最小高度。

<script type="text/javascript">

function reinitIframe(){

var Iframe = document.getElementById("contain");

try{

// 声明变量取值

var bHeight = Iframe.contentWindow.document.body.scrollHeight;

vardHeight=Iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight); // 取最大值

Iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

 

    因此，应用此段代码即可轻松解决Iframe自适应高度的问题。