iframe 自适应高度JS代码,兼容FF ，IE

最新推荐文章于 2021-06-07 13:32:43 发布

最新推荐文章于 2021-06-07 13:32:43 发布 · 135 阅读

文章标签：

#IE #Firefox #Opera #JavaScript #ViewUI

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript来动态调整iframe元素高度的方法，确保iframe能够根据其内容自动伸缩，适用于不同浏览器环境。

代码:

<iframe src="showmagzine.htm" id="magzineframe" name="magzineframe" align="center" frameborder=no width="100%" height=100% scrolling="no"  frameborder="1" bgcolor="#FFFFFF" onload="javascript:{dyniframesize('magzineframe');}">
	</iframe>

js 代码:

<script>
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]   
//extra height in px to add to iframe in FireFox 1.0+ browsers   
var FFextraHeight=getFFVersion>=0.1? 16 : 0    
function dyniframesize(iframename) {

  var pTar = null;   
  if (document.getElementById){     
    pTar = document.getElementById(iframename);   
  }else{   
    eval('pTar = ' + iframename + ';');   
  }   
  if (pTar && !window.opera){   
    //begin resizing iframe     
    pTar.style.display="block"  
    if (pTar.contentDocument && pTar.contentDocument.documentElement.scrollHeight){   
 
	      pTar.height =0;
		pTar.height=pTar.contentDocument.documentElement.scrollHeight;    
     

    }else if (pTar.Document && pTar.Document.body.scrollHeight){   
      //ie5+ syntax   
      pTar.height = pTar.Document.body.scrollHeight;   
       
      
    }   
  }     
} 


</script>