iframe的内容增高或缩减时设置其iframe的高度的处理方案

　　WEB管理软件每每是以下结构的

　　

　　用户点击子页tab切换中部的显示内容，在切换过程当中须要保证前面的子页保持先前的状态。这种状况通常都使用iframe来来做为切换的子页显示内容。

　　可是这里有一个问题，iframe不能作高度（height）的自适应。理想状态是当iframe高度超过中部内容显示区的高度的时候iframe自动增高，这样主页面会出现滚动条来作适应。处理方式即不断计算iframe内部元素高度设置iframe

　　因此计算iframe里面的内容的高度即是关键（兼容IE8+）。

　　首先，不能使用文档document的高度，由于document的高度可能不是iframe里面的内容的真实高度（当body的高度小于iframe的window高度的时候，document的高度其实是window的高度。）。并且一旦使用document的高度来设置iframe的高度，那么document的高度只会增长不会减小（当设置了iframe的高度后，那么不管iframe里面的内容如何变更，iframe的document的高度就会至少是iframe的高度），那么将致使iframe愈来愈高。因此这里使用body的高度（参考关于浏览器window、document、html、body高度的探究）来计算iframe内容的高度。

　　其次，使用body的高度后，那些脱离文档流的元素则须要手动计算其撑开iframe的高度。计算方法是

　　脱离文档流元素撑开iframe的高度 = 脱离文档流元素的高度 + 脱离文档流元素离文档顶部的高度 + 离窗口底部的余留空间

　　而后计算每一个脱离文档流元素撑开的高度取其中最大的值再和body比较，取出最大的最终iframe内容高度值。

　　实现代码以下（iframe中引用）

//供主页面调用 //设置iframe高度 
function setActiveIframeHeight(){ //计算iframe内容的高度
　　function getBodyHeight(){ 　　　　var height = 0; 　　　　if (document) { 　　　　　　height = $(document.body).height();//Math.max(document.body.clientHeight,document.body.offsetHeight); 
　　　　　　//获取iframe中显示的脱离文档流的元素
　　　　　　var panels = $('.page-shadow.active'), 　　　　　　pHeight = 0; 　　　　　　//计算其中最大的值
　　　　　　for(var i = 0; i < panels.length; i++){ 　　　　　　　　//计算撑开iframe的高度
　　　　　　　　var panelContent = $(panels[i]), 　　　　　　　　panelContentHeight = panelContent.height() + panelContent.offset().top + 50; 　　　　　　　　pHeight = (panelContentHeight > pHeight)?panelContentHeight:pHeight; 　　　　　　} 　　　　　　height = (pHeight > height)?pHeight:height; 　　　　} 　　　　return height; 　　} 　　var curHeight = getBodyHeight(), 　　//这里使用#right-content-test自适应来探测中部内容显示区域的最小高度
　　minHeight = top.$('#right-content-test').height(), //获取iframe元素 
　　htmlDom = top.$('.tab-content>.active').find('iframe')[0]; 　　curHeight = (minHeight >= curHeight) ? minHeight : curHeight; //top.activeIframeHeight记录了当前的iframe的的高度 
　　if(htmlDom && htmlDom.height != top.activeIframeHeight){ 　　　　htmlDom.height = top.activeIframeHeight; 　　} 　　//防止临界值致使滚动条时有时无使用Math.abs处理 
　　if(setActiveIframeHeight.isFirst || (Math.abs(top.activeIframeHeight - curHeight) > 2)){ 　　　　top.activeIframeHeight = curHeight; 　　　　htmlDom && (htmlDom.height = top.activeIframeHeight); 　　} 　　setActiveIframeHeight.isFirst = 0; } setActiveIframeHeight.isFirst = 1;

　　间隔一段时间调用setActiveIframeHeight便可。

　　

　　若是以为本文不错，请点击右下方【推荐】！