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中各种编码解码函数的区别和注意事项
Aug 19 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
详解js类型判断
May 22 Javascript
Nuxt.js实战和配置详解
Aug 05 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下MAIL的另一解决方案
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
解析PHP的session过期设置
2013/06/29 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
Python tkinter事件高级用法实例
2018/01/31 Python
深入了解Django View(视图系统)
2019/07/23 Python
python的移位操作实现详解
2019/08/21 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
园艺师求职信
2014/04/27 职场文书
护林防火标语
2014/06/27 职场文书
五心教育心得体会
2014/09/04 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
课外活动总结
2015/02/04 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
长江七号观后感
2015/06/11 职场文书
高中数学课堂教学反思
2016/02/18 职场文书