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学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
jquery实现保存已选用户
Jul 21 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
QT与javascript交互数据的实现
May 26 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实现获取域名的方法小结
2014/11/05 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
子页向父页传值示例
2013/11/27 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
对Python 语音识别框架详解
2018/12/24 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
会计专业的自荐信
2013/12/12 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
企业授权委托书范本
2014/04/02 职场文书
《云房子》教学反思
2014/04/20 职场文书
企业趣味活动方案
2014/08/21 职场文书
总经理年会致辞
2015/07/29 职场文书
情人节单身感言
2015/08/03 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL