A-A+
	iframe 自适应高度
今天在帮一个小伙伴做一个 iframe 自适应的效果,要在产品页面进行无刷新的显示内容,也就是当点击左侧产品导航时,右侧会直接显示出来,而不用再次刷新整个页面,所以需要将右侧做成 iframe 包含进来,这样在点击产品导航时就会只显示右侧相应的内容了,这样给人的体验非常好,而右侧显示的产品内容有多有少,这就导致一个长度不一致的问题,所以就只能使用 iframe 自适应效果了,让其右侧产品随着内容的多少而变化 iframe。
小虎博客使用了很简单的一种方法,但可能并不兼容所有的浏览器,不过已经足够使用了,先来看一下如下的代码:
- function SetWinHeight(obj)
 - {
 - var win=obj;
 - if (document.getElementById)
 - {
 - if (win && !window.opera)
 - {
 - if (win.contentDocument && win.contentDocument.body.offsetHeight)
 - win.height = win.contentDocument.body.offsetHeight;
 - else if(win.Document && win.Document.body.scrollHeight)
 - win.height = win.Document.body.scrollHeight;
 - }
 - }
 - }
 
下面是 iframe 代码,如下:
- <iframe width="778" align="center" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>
 
这段代码 win 就是框架的名称了,在右侧链接的时候进行选择就可以了,除了这个方法之外,小虎博客还搜集了一些其它的方法,下面一并进行分享一下。
第二种经典的 iframe 自适应高度代码,在多数的浏览器测试下通过,如下:
- <iframe src="https://www.xiaohuboke.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码:
 - <script type="text/javascript" language="javascript">
 - function iFrameHeight() {
 - var ifm= document.getElementById("iframepage");
 - var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
 - if(ifm != null && subWeb != null) {
 - ifm.height = subWeb.body.scrollHeight;
 - }
 - }
 - </script>
 
第三种,同上面一样,据说兼容性都很好,这一款没有进行测试,如下代码:
- <script language="javascript" type="text/javascript">
 - function dyniframesize(down) {
 - var pTar = null;
 - if (document.getElementById){
 - pTar = document.getElementById(down);
 - }
 - else{
 - eval('pTar = ' + down + ';');
 - }
 - if (pTar && !window.opera){
 - //begin resizing iframe
 - pTar.style.display="block"
 - if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
 - //ns6 syntax
 - pTar.height = pTar.contentDocument.body.offsetHeight +20;
 - pTar.width = pTar.contentDocument.body.scrollWidth+20;
 - }
 - else if (pTar.Document && pTar.Document.body.scrollHeight){
 - //ie5+ syntax
 - pTar.height = pTar.Document.body.scrollHeight;
 - pTar.width = pTar.Document.body.scrollWidth;
 - }
 - }
 - }
 - </script>
 - <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">
 - </iframe>
 
好了,就分享这几种 iframe 自适应高度的代码吧,其实这几款代码都比较老了,但是都比较经典,对于兼容性上感觉还可以,当然,现在网上还有一些更新的 iframe 自适应代码,大家可以谷歌一下,这里就权当做个笔记吧,在使用的时候可以好进行摘取。