解决iframe框架页面自适应高度问题代码如下，需要注意的是框架引用页面一定要设置name属性，否则会不生效
方案一：
<iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj"></iframe>
test.asp页面head间增加如下JS代码
<SCRIPT LANGUAGE="JavaScript">
function f_frameStyleResize(targObj){
var targWin = targObj.parent.document.all[targObj.name];
if(targWin != null) {
var HeightValue = targObj.document.body.scrollHeight
if(HeightValue < 600){HeightValue = 600}
targWin.style.pixelHeight = HeightValue;
}
}
function f_iframeResize(){
bLoadComplete = true; f_frameStyleResize(self);
}
var bLoadComplete = false;
window.onload = f_iframeResize;
</SCRIPT>
方案二：备用
在主页面增加如下JS代码
<script type="text/javascript">
var iframeids=["myblog"]
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight)
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight)
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
补充一下，主页是http://www.name.com
包含框架页是：http://s.name.com 是跨站包含，用以上方法浏览器会提示：拒绝访问。
//浏览器兼容的iframe高度自适应
function setHeight(obj){
//设置对象的高度使其没有滚动轴
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0
var BVer=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var AdjustHeight=BVer>=0.1? 25 : 20
if(ie){
newheight = obj.Document.body.scrollHeight//+16;
}
else{
//ie5+ syntax
newheight = obj.contentDocument.body.offsetHeight+AdjustHeight;
}
obj.height = newheight>430?newheight:430;
}
<iframe name="mainFrame" id="mainFrame" scrolling=no frameborder="0" src="" onload="setHeight(this)" width="100%" height="100%"></iframe>
<script>
var Iframe = new Object();
//Iframe自适应高度
Iframe.resizeToInnerHeight = function(objIframe){
var o=objIframe
if (!o) return;
o.style.height = o.contentWindow.document.body.scrollHeight + "px";
}
</script>
<iframe src="test.htm" onload="Iframe.resizeToInnerHeight(this)"></iframe>
IE6 FF1.5 opera 测试通过
在引页面里做。
以下插到<head></head>里面
function autoResize()//自动调整框架高度
{
try{document.all["ulist"].style.height=ulist.document.body.scrollHeight;}
catch(e){}
}
以下为引用处。
<iframe border="0" name="ulist" marginwidth="0" marginheight="0" src="userlist.asp" frameborder="0" width="100%" onload="this.height=ulist.document.body.scrollHeight" style="height:expression(1);aho:expression(autoResize())" scrolling="no"></iframe>
Jul 20
Recent Comments