在页面中通过iframe嵌入了另外一个页面后,如何使得页面的这块区域随着iframe的高度自动适应而不会出现蹩脚的上下左右滚动条呢?下面这个办法就是使用javascript实现iframe高度自适应的,这个可是兼容所有浏览器的,ie,firefox,chrome,opera,safari这些浏览器都能够实现iframe高度自适应的,具体的js代码如下:
function dyniframesize(down){ var Sys={}; var ua=navigator.userAgent.toLowerCase(); var s; (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]: (s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]: (s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]: (s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]: (s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0; var pTar=null; if (document.getElementById){ pTar=document.getElementById(down); }else{ eval('pTar='+down+';'); } pTar.style.display="block"; if (Sys.ie){ if(Sys.ie=='9.0'){ pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px"; pTar.width=pTar.contentWindow.document.body.scrollWidth+"px"; }else if(Sys.ie=='8.0'){ pTar.height=pTar.Document.body.offsetHeight+15+"px"; pTar.width=pTar.Document.body.scrollWidth+"px"; }else{ pTar.height=pTar.Document.body.scrollHeight+25+"px"; pTar.width=pTar.Document.body.scrollWidth+"px"; } } if (Sys.firefox){ pTar.height=pTar.contentDocument.body.offsetHeight+15+"px"; pTar.width=pTar.contentDocument.body.scrollWidth+"px"; } if (Sys.chrome){ pTar.height=pTar.contentDocument.body.offsetHeight; pTar.width=pTar.contentDocument.body.scrollWidth; } if (Sys.opera){ pTar.height=pTar.contentDocument.body.offsetHeight; pTar.width=pTar.contentDocument.body.scrollWidth; } if (Sys.safari){ if(pTar.contentDocument.body.offsetHeight <= '186'){ pTar.height=pTar.contentDocument.body.offsetHeight+10; }else{ pTar.height=pTar.contentDocument.body.offsetHeight; } pTar.width=pTar.contentDocument.body.scrollWidth; } }
具体的使用方法如下(设置id=phpernote的iframe的高度自适应iframe里面的内容高度):
<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0" border="0" width="620px" style="border:0px;background:#FFF;max-height:245px;" scrolling="no" src="http://www.phpernote.com/comm/page/218167" id="phpernote" onload="javascript:dyniframesize('phpernote');"></iframe>