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 相关文章推荐
Javascript的构造函数和constructor属性
Jan 09 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
完善的jquery处理机制
Feb 21 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
vue路由教程之静态路由
Sep 03 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
Prototype Function对象 学习
2009/07/12 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python递归实现快速排序
2018/08/18 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Python目录和文件处理总结详解
2019/09/02 Python
python3获取url文件大小示例代码
2019/09/18 Python
PHP如何设置和取得Cookie值
2015/06/30 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
小加工厂管理制度
2014/01/21 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP