JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)


Posted in Javascript onMarch 28, 2011
function adjustIFramesHeightOnLoad(iframe) { 
var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight); 
$(iframe).height(iframeHeight); 
}

失败的测试就不说了,来直接的。
两个链接和iframe:
<li><a href="selfinfo.jsp" target="c-c-iframe" title="个人信息" >个人信息</a></li> 
<li><a href="modifypass.jsp" target="c-c-iframe" title="修改密码" >修改密码</a></li> 
<iframe src="init.jsp" id="c-c-iframe" name="c-c-iframe" width="500px;" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

js代码:
<script type="text/javascript"> 
<!-- 
$(function(){ 
$("#c-c-iframe").load(function(){ 
$(this).height($(this).contents().find("#content").height() + 40); 
}); 
}); 
--> 
</script>

这里的find("#content")是找出iframe内容文档中的id为content的高度(另外比如find("body")),并设置给iframe,
类似的还可以设置宽度,留给需要的朋友尝试吧。
这样就解决了iframe不会因为内容过大被挡住的问题(因为我设置了scrolling="no")。
PS:基本上我会优先考虑使用iframe来实现无刷新,兼容浏览器的后退按钮;而且使用iframe加载flash是很爽的,不用写什么js调用,object标签,还符合W3C标准。
2008年11月28日17:13:31 ,今天使用过程中根据实际情况进行了一下改良,代码如下:
<script type="text/javascript"> 
<!-- 
$(function(){ 
$("#workArea").load(function(){ 
var height = $(this).contents().find("#box").height() + 40; 
//这样给以一个最小高度 
$(this).height( height < 400 ? 400 : height ); 
}); 
}); 
--> 
</script>

另发现使用find("body")不太好使,高度不准确。
Javascript 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
node.js入门教程
Jun 01 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 #Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 #Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 #Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 #Javascript
基于jquery的3d效果实现代码
Mar 23 #Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 #Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 #Javascript
You might like
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python 如何批量更新已安装的库
2020/05/26 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
市场部规章制度
2014/01/24 职场文书
家长会演讲稿
2014/04/26 职场文书
五分钟演讲稿
2014/04/30 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书