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 多级checkbox选择效果
Aug 20 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
angularJS 中input示例分享
Feb 09 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
继续学习javascript闭包
Dec 03 Javascript
详解webpack babel的配置
Jan 09 Javascript
详解jquery和vue对比
Apr 16 jQuery
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
jQuery实现简单全选框
Sep 13 jQuery
基于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编码转换
2012/11/05 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
javascript基本语法
2016/05/31 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
利用ctypes提高Python的执行速度
2016/09/09 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python字符串的方法与操作大全
2018/01/30 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python中threading开启关闭线程操作
2020/05/02 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
北承题目(C++)
2012/05/16 面试题
体育专业学生自我评价范文
2014/01/17 职场文书
小学课外阅读总结
2014/07/09 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
小学工作总结2015
2015/05/04 职场文书
匿名信格式范文
2015/05/27 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL