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模板技术
Apr 27 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
JavaScript JSON使用原理及注意事项
Jul 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的历史和优缺点
2006/10/09 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python如何将图片转换为字符图片
2020/08/19 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
自动一体化专业求职信
2014/03/15 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
SQL之各种join小结详细讲解
2021/08/04 MySQL
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技