方法一:
//iframe高度自适应 function IFrameReSize(iframename) { var pTar = document.getElementById(iframename); if (pTar) { //ff if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) { pTar.height = pTar.contentDocument.body.offsetHeight; } //ie else if (pTar.Document && pTar.Document.body.scrollHeight) { pTar.height = pTar.Document.body.scrollHeight; } } }
//iframe宽度自适应 function IFrameReSizeWidth(iframename) { var pTar = document.getElementById(iframename); if (pTar) { //ff if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) { pTar.width = pTar.contentDocument.body.offsetWidth; } //ie else if (pTar.Document && pTar.Document.body.scrollWidth) { pTar.width = pTar.Document.body.scrollWidth; } } }
使用方法:
<iframe src="Main.htm" scrolling="no" frameborder="0" height="100%" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe>
方法二:经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
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 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的width=100%和height=100%