首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

▲▲▲没有解决的iframe自适应高度有关问题,请大家看看

2011-12-10 
▲▲▲没有解决的iframe自适应高度问题,请大家看看。现页面上有三个iframe,一个控制顶部,一个控制左边,一个控

▲▲▲没有解决的iframe自适应高度问题,请大家看看。
现页面上有三个iframe   ,一个控制顶部,一个控制左边,一个控制右边。
如下:
<table     cellSpacing= "0 "   cellPadding= "0 "   width= "920 "   align= "center "   border= "0 "
  style= "border-right:   #cccccc   1px   solid;   border-top:   #cccccc   1px   solid;   border-left:   #cccccc   1px   solid;   border-bottom:   #cccccc   1px   solid; ">
<tr>
<td   height= "190 "   style= "   BORDER-BOTTOM:   #009900   1px   solid "> <iframe   src= "top.aspx "   frameBorder= "0 "   width= "100% "   scrolling= "no "     height= "190 "> </iframe>
</td>
</tr>
<tr   >
<td     >
<TABLE   id= "Table1 "     cellSpacing= "0 "   cellPadding= "0 "   width= "100% "   align= "center "   border= "0 "   height= "100% "   >
<TR>
<td   width= "20% "     > <iframe       id= "left "   src= "admin_left.aspx "     frameBorder= "0 "   width= "100% "     height= "980 "   scrolling= "no "     >   </iframe>
</td>
<TD   width= "80% "   > <iframe   id= "main "   name= "main "       src= "admin_main.aspx "       frameBorder= "0 "   width= "100% "     height= "980 "   scrolling= "no "     >   </iframe>
</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td   height= "100 "   style= "   BORDER-top:   #009900   1px   solid ">
<iframe   src= "../foot.aspx "   frameBorder= "0 "   width= "100% "     scrolling= "no "   height= "100 "> </iframe>
</td>
</tr>
</table>
问题是:当点击左边的菜单时,如何让左边的iframe和右边的iframe的高度随新打开的页面的高度变化面变化。   我用梅花雪的方法能实现右边iframe的高度随之变化,但左边iframe菜单确自动下移,多出来很多空白。

[解决办法]
原来是要联动啊

我直接给你看我针对类似问题的脚本源码吧

// frameId是自己,frameOtherId是边上那个,frameTopId是顶层的frame(如果存在这个嵌套的话)
function SetFrameHeight(height, frameId, frameOtherId, frameTopId)
{
if (top == parent) return;

var frame = parent.document.getElementById(frameId);
if (frame == null) return;

var frameTop = top.document.getElementById(frameTopId);
var frameOther = parent.document.getElementById(frameOtherId);
if (frameTop != null && frameOther != null)
{
var windowContent = frameOther.contentWindow;
var bodyHeight = 0;

if (windowContent != null && windowContent.document.body.scrollHeight)
{ //ie5+ syntax
bodyHeight = windowContent.document.body.scrollHeight;
}
else if (frameOther.contentDocument && frameOther.contentDocument.body.offsetHeight)
{ //ns6 syntax
frameTop.style.display = "block ";
bodyHeight = frameOther.contentDocument.body.offsetHeight + FFextraHeight;


}

if (height <= bodyHeight) height = bodyHeight;
//height += 20;
frameTop.height = height;
}

frame.style.height = height + "px ";

}

[解决办法]
http://blog.csdn.net/jxufewbt/archive/2006/05/24/752458.aspx
[解决办法]
这是我用过的
<script type= "text/javascript ">
var iframeids=[ "message "]
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 + 50;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight)
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight + 50;
}
}
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>

<iframe src= "message.aspx " id= "message " runat= "server " frameborder= "0 " width= "100% ">
</iframe>
[解决办法]
main.htm:

<html>
<head>
<meta http-equiv= 'Content-Type ' content= 'text/html; charset=gb2312 ' />
<meta name= 'author ' content= 'F.R.Huang(meizz梅花雪)//www.meizz.com ' />
<title> iframe自适应加载的页面高度 </title>
</head>

<body>
<div> <iframe src= "child.htm "> </iframe> </div>
</body>
</html>

child.htm:

<html>
<head>
<meta http-equiv= 'Content-Type ' content= 'text/html; charset=gb2312 ' />
<meta name= 'author ' content= 'F.R.Huang(meizz梅花雪)//www.meizz.com ' />
<title> iframe 自适应其加载的网页(多浏览器兼容) </title>
<script type= "text/javascript ">
<!--
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName( "IFRAME ");
for(var i=0; i <a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)


{
var h1=0, h2=0;
a[i].parentNode.style.height = a[i].offsetHeight + "px ";
a[i].style.height = "10px ";
if(document.documentElement&&document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;

var h=Math.max(h1, h2);
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = a[i].parentNode.style.height = h + "px ";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent( "onload ", iframeAutoFit);
//window.attachEvent( "onresize ", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener( 'load ', iframeAutoFit, false);
//window.addEventListener( 'resize ', iframeAutoFit, false);
}
//-->
</script>
</head>
<body>
<table border= "1 " width= "200 " style= "height: 400px; background-color: yellow ">
<tr>
<td> iframe 自适应其加载的网页(多浏览器兼容,支持XHTML) </td>
</tr>
</table>
</body>
</html>

很多人反应在IE7里使用它会死机,那是因为在自适应高度时触发了 window.onresize 事件,而这个事件又去调用这个调整 <iframe> 高度的函数,产生了死循环调用。

//给你一段代码!你看看!费那事干吗!

热点排行