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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP使用函数用法详解
2018/09/30 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
请介绍一下Ant
2016/07/22 面试题
SQL数据库笔试题
2016/03/08 面试题
元旦获奖感言
2014/03/08 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
质量保证书怎么写
2015/02/27 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书