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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
基于Vue实现timepicker
Apr 25 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
解决Vue中 父子传值 数据丢失问题
Aug 27 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者的疑难问答(1)
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
详解Python中with语句的用法
2015/04/15 Python
基于python的字节编译详解
2017/09/20 Python
django如何实现视图重定向
2019/07/24 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
人事主管岗位职责
2014/01/30 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
django 认证类配置实现
2021/11/11 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js