架构深渊

慢慢走进程序的深渊……关注领域驱动设计、测试驱动开发、设计模式、企业应用架构模式……积累技术细节,以设计架构为宗。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

firefox下 iframe 高度自适应问题

Posted on 2009-01-04 11:59  chen eric  阅读(590)  评论(0编辑  收藏  举报
js脚本在不同的浏览器下存在兼容性问题,遇到一个利用iframe引用网页,高度自调整问题。同样在IE下可以通过的脚本在iframe下没有效果。
      查找资料得如下代码:
方法一:
var frm = document.getElementById("id_news");   
var subWeb = document.frames ? document.frames["name_news"].document : frm.contentDocument;   
if(subWeb != null)   
{ frm.height 
= subWeb.body.scrollHeight;} 

此代码在父页中调用,但实践中发现在一问题,iframe.height的值总是上一次引用页的值,跟踪调用发现在代码运行没有任何问题,说不清是怎么回事,但可以肯定有时间延迟的问题,修改代码如下:

function TuneHeight()   

setTimeout(
"h()",1); 

function h()
{
    
var frm = document.getElementById("id_news");   
var subWeb = document.frames ? document.frames["name_news"].document : frm.contentDocument;   
if(subWeb != null)   
{ frm.height 
= subWeb.body.scrollHeight;} 
}

在父页中调用TuneHeight() 问题得解。
方法二:这个比较简单,仰面父页不用动,子页中加入
<script type="text/javascript">
     
<!--
     
function iframeAutoFit()
     {
         
try
         {
             
if(window!=parent)
             {
                 
var a = parent.document.getElementsByTagName("IFRAME");
                 
for(var i=0; i<a.length; i++//author:meizz
                 {
                     
if(a[i].contentWindow==window)
                     {
                         
var h1=0, h2=0;
                         a[i].parentNode.style.height 
= a[i].offsetHeight +"px";
                         a[i].style.height 
= "10px";
                         
if(document.documentElement&&document.documentElement.scrollHeight)
                         {
                             h1
=document.documentElement.scrollHeight;
                         }
                         
if(document.body) h2=document.body.scrollHeight;

                         
var h=Math.max(h1, h2);
                         
if(document.all) {h += 4;}
                         
if(window.opera) {h += 1;}
                         a[i].style.height 
= a[i].parentNode.style.height = h +"px";
                     }
                 }
             }
         }
         
catch (ex){}
     }
     
if(window.attachEvent)
     {
         window.attachEvent(
"onload",iframeAutoFit);
     }
     
else if(window.addEventListener)
     {
         window.addEventListener(
'load',   iframeAutoFit,   false);
     }
     
//-->
     </script>