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去掉数组中的重复元素
Jan 13 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
使用js和canvas实现时钟效果
2020/09/08 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
详解Python3的TFTP文件传输
2018/06/26 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
后勤人员岗位职责
2013/12/17 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
实习证明模板
2015/06/16 职场文书
商场广播稿范文
2015/08/19 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL