iframe自适应内容高度这个功能在大门户网站都会有看到像广告调用就会用到它了今天我们来看一篇iframe自适应内容高度例子。
写个初级版的先用着吧。就几行代码。
| 代码如下 |
|
|
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
//浏览器高度自适应
function SetCwinHeight(iframeObj){
var minHeight=400;//如果超过最小高度则自动变高
if (document.getElementById){
if (iframeObj && !window.opera){
if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
var h=iframeObj.contentDocument.body.offsetHeight;
if(h<minHeight){
h=minHeight;
}
iframeObj.height = h;
document.getElementById('leftiframe').height = h;
}else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
var h=document.frames[iframeObj.name].document.body.scrollHeight;
if(h<minHeight){
h=minHeight;
}
iframeObj.height = h;
document.getElementById('leftiframe').height =h;
}
}
}
}
function init(){
var main_width=document.getElementById('mainmenu').style.width;
var left_width=document.getElementById('leftmenu').style.width;
var h=document.getElementById('rightmenu').style.height;
document.getElementById('mainmenu').style.height=h;
document.getElementById('rightmenu').style.width =parseInt(main_width)-parseInt(left_width)-5+'px';
}
</script>
</head>
<body bgcolor="#E0E0E0" onload="init();">
<center>
<div id="topmenu">
<IFRAME NAME="topm" width=100% height=200 frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/top.jsp" scrolling=no
allowTransparency="true"></IFRAME>
</div>
<div id="mainmenu" style="border: 1px blue solid;width: 1024px;text-align: center;">
<div id="leftmenu" style="border: 1px green solid; float:left;width:150px;">
<IFRAME NAME="leftm" id="leftiframe" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/left.jsp" scrolling=no
allowTransparency="true"></IFRAME>
</div>
<div id="rightmenu" style="border: 1px red solid;float:left;width:78%;height: 400px;">
<IFRAME onload="SetCwinHeight(this);" NAME="rightm" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/right.jsp" scrolling=no
allowTransparency="true" align=center></IFRAME>
</div>
</div>
<div id="bottommenu">
<IFRAME NAME="bottomm" width=1002 height=73 frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/bottom.jsp" scrolling=no
allowTransparency="true" align=center></IFRAME>
</div>
</center>
</html>
|
//窗体加载时获取左侧iframe的宽度，浏览器宽度-左侧=自动判断右侧rightframe的宽度，避免写死。
点击左侧菜单，相应打开右侧页面，由于右侧页面高度不一，且可能影响左侧导航丑陋，故而做了下判断。写在上面的js的SetCwinHeight方法中。
右侧导航随内容高度变化而变化，左侧导航则至少维持400的高度，避免右侧过短影响左侧显示。
