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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
世界收音机发展史
2021/03/01 无线电
PHP伪静态写法附代码
2008/06/20 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
详解用python写一个抽奖程序
2019/05/10 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
五年级英语教学反思
2014/01/31 职场文书
留学顾问岗位职责
2014/04/14 职场文书
主要负责人任命书
2014/06/06 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
公司处罚决定书
2015/06/24 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
初中语文教学反思范文
2016/03/03 职场文书
python实现监听键盘
2021/04/26 Python
Html5生成验证码的示例代码
2021/05/10 Javascript