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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 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判断ip黑名单程序代码实例
2014/02/24 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jquery foreach使用示例
2013/09/12 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
react 父子组件之间通讯props
2018/09/08 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
基于Python实现文件大小输出
2016/01/11 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Python中format()格式输出全解
2019/04/12 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
如何利用python进行时间序列分析
2020/08/04 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
python lambda的使用详解
2021/02/26 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
请说出以下代码输出什么
2013/08/30 面试题
集体婚礼证婚词
2014/01/13 职场文书
高中社区服务活动报告
2015/02/05 职场文书
公积金具结保证书
2015/05/11 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python