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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
js实现纯前端压缩图片
Nov 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
js密码强度检测
2016/01/07 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python 消费 kafka 数据教程
2019/12/21 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Pycharm修改python路径过程图解
2020/05/22 Python
python判断是空的实例分享
2020/07/06 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
HSRP的含义以及如何工作
2014/09/10 面试题
先进个人事迹材料
2014/01/25 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
生日答谢词
2015/01/05 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL