关于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;
}
}
}

浙公网安备 33010602011771号