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之锁定表格栏位
Jun 29 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
seajs下require书写约定实例分析
May 16 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php设计模式之单例模式代码
2016/06/11 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
大学三年的自我评价
2013/12/25 职场文书
新闻发布会主持词
2014/03/28 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Nginx反向代理、重定向
2022/04/13 Servers