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 相关文章推荐
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
基于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/03 咖啡文化
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
js实现自定义路由
2017/02/04 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
ECMAScript6--解构
2017/03/30 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
Python解析树及树的遍历
2016/02/03 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
什么是python的id函数
2020/06/11 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
酒店前厅员工辞职信
2014/01/08 职场文书
大学生村官演讲稿
2014/04/25 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers