iframe自适应高度

方法一:

//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%


作者:GitLoft
出处:http://www.cnblogs.com/joysky/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

原文地址:https://www.cnblogs.com/joysky/p/3889481.html