jquery iframe自适应高度
2015-06-03 15:28
786 查看
当页面中有多个iframe时,有时某些iframe的高度可能高出页面的高度便会出现两条甚至跟多条,我现在需要得到的结果是将iframe平铺(上下排列时完全展开并且只有一个页面的滚动条,即iframe自带的滚动条消失),具体的javascript代码如下:
function SetWinHeight(obj) {
var frm = obj;
var subWeb = document.frames ? document.frames["iframe_content"].document
: frm.contentDocument;
if (frm != null && subWeb != null) {
frm.height = subWeb.body.scrollHeight;
}
}
主要页面代码如下:
<iframe name="iframe_title" id="iframe_title" src="title.jsp" width="100%" height="175" scrolling="auto"></iframe>
<iframe name="iframe_content" id="iframe_content" height="100%" onload="SetWinHeight(this);" src="content.jsp" width="100%" scrolling="auto"></iframe>
注:iframe_title为导航栏,是一个jsp页面,上面的按钮利用超链<a>中的target属性指定到iframe中(例:target="iframe_content")按动按钮会在iframe_content显示相应的页面,如果没有这个js处理并且下面的页面高度大于当前浏览器窗口的高度时,就会出现两条滚动条。
这个js可以获取iframe_content中页面的高度,然后将页面的高度赋值给当前该页面所在的iframe的高度,这样在主页面中就会显示出content.jsp的完整页面(即使高度大于浏览器窗口高度时也不会出现两个滚动条!)。
原文:http://wenku.baidu.com/link?url=DaJQxy_7o5CiTFibtKHw-ZCIRmyboq3pnzp1pKpxZdF6Fm8j9Zta3x9aKQjiHwMxbIG0QpvO-MozfTVmVOP93XndwLR95m28fDVA8gdB703
function SetWinHeight(obj) {
var frm = obj;
var subWeb = document.frames ? document.frames["iframe_content"].document
: frm.contentDocument;
if (frm != null && subWeb != null) {
frm.height = subWeb.body.scrollHeight;
}
}
主要页面代码如下:
<iframe name="iframe_title" id="iframe_title" src="title.jsp" width="100%" height="175" scrolling="auto"></iframe>
<iframe name="iframe_content" id="iframe_content" height="100%" onload="SetWinHeight(this);" src="content.jsp" width="100%" scrolling="auto"></iframe>
注:iframe_title为导航栏,是一个jsp页面,上面的按钮利用超链<a>中的target属性指定到iframe中(例:target="iframe_content")按动按钮会在iframe_content显示相应的页面,如果没有这个js处理并且下面的页面高度大于当前浏览器窗口的高度时,就会出现两条滚动条。
这个js可以获取iframe_content中页面的高度,然后将页面的高度赋值给当前该页面所在的iframe的高度,这样在主页面中就会显示出content.jsp的完整页面(即使高度大于浏览器窗口高度时也不会出现两个滚动条!)。
原文:http://wenku.baidu.com/link?url=DaJQxy_7o5CiTFibtKHw-ZCIRmyboq3pnzp1pKpxZdF6Fm8j9Zta3x9aKQjiHwMxbIG0QpvO-MozfTVmVOP93XndwLR95m28fDVA8gdB703
相关文章推荐
- jquery的checked
- jquery html5 上传图片并且 图片回显
- jquery实现checkbox复选框的全选反选
- jQuery学习笔记3--网页字体变大变小
- 用户注册验证_基于jquery validate
- $.grep ,$.map,jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery页面刷新
- jquery qrcode二维码生成插件
- jQuery中extend()和fn.extend()方法详解
- jquery中添加属性和删除属性
- jQuery事件绑定on()、bind()与delegate() 方法详解
- jquery 防止按钮二次点击
- jQuery插件jqplot的详细配置说明和渲染器
- jquery选择器,逗号
- Jquery 获取CheckBoxList 中选择的值和获取RadioButton 选中的状态
- jquery抖动的按钮
- CSS选择器与jQuery选择器的异同:一些特殊的选择器
- jquery delegate
- springMVC框架下JQuery传递并解析Json数据
- Jquery绑定事件(bind和live的区别)