iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.

小项目龙里中学多媒体教室管理系统中后台管理用到了iframe.由于要动态载入内容,所以需要iframe自适应内容页的高度.用谷歌搜索到很多答案,其中成功的是这段代码:

 

< script type = " text/javascript " >       

         function  SetCwinHeight() {
             var  iframeid  =  document.getElementById( " maincontent1 " );  // iframe id            
             if  (document.getElementById) {
                 if  (iframeid  &&   ! window.opera) {
                     if  (iframeid.contentDocument  &&  iframeid.contentDocument.body.offsetHeight) {
                        iframeid.height  =  iframeid.contentDocument.body.offsetHeight;
                    }  else   if  (iframeid.Document  &&  iframeid.Document.body.scrollHeight) {
                        iframeid.height  =  iframeid.Document.body.scrollHeight;
                    }
                }
            }
        }
     < / script>

 

iframe代码:

 1 <iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"

2              onload = " Javascript:SetCwinHeight() "  height = " 1 "  id = " maincontent1 "  src = " <%=ResolveClientUrl( " ~ / message")%>"
3              marginwidth = " 0 "  marginheight = " 0 "  frameborder = " 0 "  scrolling = " no " >< / iframe>

在IE8下成功实现自适应高度,但在谷歌浏览器高度只会增加,不会减少,也就是说,长高后就缩不回来.

用GG搜索,找到这样一段信息:

/****************************************原文引用*********************************** /

 原文链接:http://blog.pchome.net/article/194139.html

那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe(){var iframe = document.getElementById("frame_content");

try{

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

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);
这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 οnlοad=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。

在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。 

/**********************************原文引用结束***************************** /

请注意红色的这句.读到这里,我想在改变iframe.height之前可否先给 iframe.height赋一个够小的初始值,如iframe.height="10px",然后再改变如iframe.height.这样就解决了原文红色部分的问题。

最终代码如下:

 

 1  < script type = " text/javascript " >       
 2 
 3           function  SetCwinHeight() {
 4               var  iframeid  =  document.getElementById( " maincontent1 " );  // iframe id
 5                iframeid.height  =   " 10 px " ;//先给一个够小的初值,然后再长高.
 6               if  (document.getElementById) {
 7                   if  (iframeid  &&   ! window.opera) {
 8                       if  (iframeid.contentDocument  &&  iframeid.contentDocument.body.offsetHeight) {
 9                          iframeid.height  =  iframeid.contentDocument.body.offsetHeight;
10                      }  else   if  (iframeid.Document  &&  iframeid.Document.body.scrollHeight) {
11                          iframeid.height  =  iframeid.Document.body.scrollHeight;
12                      }
13                  }
14              }
15          }
16       < / script>

Code

 

iframe代码仍然不变:

 1 <iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"

2              onload = " Javascript:SetCwinHeight() "  height = " 1 "  id = " maincontent1 "  src = " <%=ResolveClientUrl( " ~ / message")%>"

3             marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe> 

经测试,iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.

转载于:https://www.cnblogs.com/yuhe7919/archive/2009/11/04/iframe.html