当前位置:网站首页 >更多 >站长帮 > 正文

[建站教程] 如何设置iframe自适应内容高度

作者:观棋日期:2018-02-18 分类:站长帮

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/stylescript 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(hminHeight){ 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(hminHeight){ 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" div id="leftmenu" 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" 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的高度,避免右侧过短影响左侧显示。


取消回复欢迎 发表评论:

请填写验证码
本站会员尊享VIP特权,现在就加入我们吧!登录注册
登录
用户名
密码
注册
用户名
密码
确认密码
昵称
邮箱
QQ
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱
请先 登录 再评论,若不是会员请先 注册