关于iframe高度自动伸缩

最近弄一个网站,客户说列表及详细内容页里面的信息需要用iframe嵌套来做,详细内容页的高度不固定[里面有个PDF阅读功能,没有PDF文档话就不显示],所以搜了搜资料,觉得几个方法不错,记录如下(方法来源网络):

方法一:

在被嵌入页面中加入如下js代码:

src="jquery-1.4.2.min.js"
$(document).ready(function(){
parent.document.all("IFRAMEK标签 ID名").style.height=document.body.scrollHeight; 
parent.document.all("IFRAMEK标签 ID名").style.width=document.body.scrollWidth; 
});

经测试该方法下在火狐下不兼容.

方法二:

<iframe id="iframeID" name="iframeID" style="width:735px;" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px"  onload="javascript:iFrameHeight();"></iframe>

在嵌入页面中加入以下JS方法:

js代码:
function iFrameHeight() { 
        var ifm= document.getElementById("iframeID"); 
        var subWeb = document.frames ? document.frames["iframeID"].document : ifm.contentDocument; 
        if(ifm != null && subWeb != null) { 
        ifm.height = subWeb.body.scrollHeight; 
        } 
}

此方法测试时火狐高版本下不兼容.

方法三:

此方法推荐,测试后在IE6/IE7/IE8/火狐下兼容

<iframe id="iframe1" style="width:735px;" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" name="iframe1" onload="javascript:dyniframesize('iframe1');"></iframe>

在嵌入页面中加入以下JS方法:

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; 
} 
} 
}
posted @ 2011-05-03 10:27  市丸炎九  阅读(673)  评论(2)    收藏  举报